前两篇文章我们把「Web前端开发进阶篇」CSS样式讲解完了，接着我们来讲解下一篇文章，关于CSS框模型的内容知识，小伙伴们跟上我的节奏，动起来，Let's go！

【引言】

CSS框模型（也就是常说的盒子模型）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。css中的框模型是css的基础，框模型的理解可以帮助我们很好的掌握页面中的布局，进行对样式进行修改。话不多说，那就开始吧。

CSS 框模型概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

从上图看出，元素框最内部分的是实际的内容，其次往外围的是内边距（padding），内边距呈现了元素的背景，内边距的边缘是边框（border），默认是透明的边框，不会遮挡任何元素，最外面的是外边距（margin）。

提示：背景应用于内容的内边距、边框组成的区域。

内边距、边框和外边距默认都是为0，但是有些浏览器它们有自己默认的外边距和内边距，可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。例如，用通用选择器对所有元素进行设置。

* {margin: 0;padding: 0;}

在CSS中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

CSS就可以这样写：

#box {
 width: 70px;
 margin: 10px;
 padding: 5px;
}

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

浏览器兼容性

一旦为页面设置了恰当的 DTD（文档类型定义），大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

【在CSS中，我们把padding和margin统称为内边距和外边距，边框（border）内的是内边距，边框外的就是外边距，好记吧。哈哈】

CSS内边距（padding）

元素的内边距在边框和内容区之间。CSSpadding 属性定义元素边框与元素之间的空白区域。padding属性接受长度值或百分比值，但不允许负值，例如，给div元素的各边添加10px的内边距，你只需要这样写：

#box
{padding: 10px;}

你也可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位，例如：

#box{padding: 10px 20em 2ex 20%;}

单边内边距属性

可以通过下面四个属性，分别设置各边的内边距：

padding-top
padding-right
padding-bottom
padding-left

例如：

#box {
 padding-top: 10px;
 padding-right: 0.25em;
 padding-bottom: 2ex;
 padding-left: 20%;
 }

CSS边框

边框在CSS是最常用的属性，可以用它创建出效果出色的边框，并且可以应用于任何元素。也就是我们常用的border，元素的边框就是围绕元素内容和内边距的一条或多条线。

每个边框有 3 个方面：宽度、样式，以及颜色。

1、边框的样式

上节课我们讲解了CSS轮廓（outline-style），但是由于浏览器兼容性，用的较少，我们可以用边框定义多个样式，例如：

.p1 {border-style: solid;}
.p2 {border-style: dotted}
.p3 {border-style: dashed}
.p4 {border-style: solid}
.p5 {border-style: double}
.p6 {border-style: groove}
.p7 {border-style: ridge}
.p8 {border-style: inset}
.p9 {border-style: outset}

效果：

定义单边样式，例如：

.p1 {
				border-top-style: solid;
				border-right-style: dotted;
				border-bottom-style: double;
				border-left-style: groove
			}

效果：

2、边框的宽度

可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick。

注释：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。

所以，我们可以这样设置边框的宽度：

p {border-style: solid; border-width: 5px;}

或者：

p {
 	border-style: solid; 
 	border-width: thick;
}

定义单边宽度

可以按照 top-right-bottom-left 的顺序设置元素的各边边框：

p {
 	border-style: solid; 
 	border-width: 15px 5px 15px 5px;
}

也可以通过下列属性分别设置边框各边的宽度：

p {
 	border-style: solid;
 	border-top-width: 15px;
 	border-right-width: 5px;
 	border-bottom-width: 15px;
 	border-left-width: 5px;
 }

没有边框

由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果想要边框出现，就必须声明一个边框样式。仅有宽度，颜色是不起任何作用的。

3、边框的颜色

使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。也是上、右、下、左。可以用十六进制或RGB来表示颜色，单边边框颜色与单边样式和单边宽度属性相同。例如：

.p1 {
				border-top-color: red;
				border-right-color: blue;
				border-bottom-color: royalblue;
				border-left-color: hotpink;
			}

透明边框：如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。你就可以这样：

border-color: transparent;

CSS 外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

h1 {margin : 10px 0px 15px 5px;}

值复制：

在前两节中提到过值复制。下面我们为您讲解如何使用值复制。

有时，我们会输入一些重复的值：

p {margin: 0.5em 1em 0.5em 1em;}

通过值复制，您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的：

p {margin: 0.5em 1em;}

这两个值可以取代前面 4 个值。这是如何做到的呢？CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。

下图提供了更直观的方法来了解这一点：

换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。

h1 {margin: 0.25em 1em 0.5em;}	/* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* 等价于 1px 1px 1px 1px */

这种办法有一个小缺点，您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素，下外边距和右外边距设置为 30 像素。在这种情况下，必须写作：

p {margin: 20px 30px 30px 20px;}

单边外边距属性

单边外边距属性跟单边边框颜色与单边样式和单边宽度属性相同，都是从四个方向设置单边外边距值。

h2 {
 margin-top: 20px;
 margin-right: 30px;
 margin-bottom: 30px;
 margin-left: 20px;
 }

提示：

Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

也很简单，看张图就明白了：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

CSS框模型今天就讲解到这里了，下一篇讲解CSS定位，希望大家不要放弃学习哦！

PS：

本文为‘Web前端进阶指南’原创，手动码字不易，小伙伴们别忘了顺手点个赞加个关注哈，有什么不懂的下方留言评论或私信。谢谢大家哈！

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

「Web前端开发进阶篇」CSS框模型

CSS 框模型概述

CSS内边距（padding）

CSS边框

CSS 外边距

外边距合并