html页面中，所有可见的html标签元素都是由margin、padding、border 和内容组成的，专业术语称盒子模型或框模型，后面统称为盒子模型。

如下图示例：

按F12键打开开发者工具，使用选择元素工具（箭头图标），随便选择一个html元素，在下方styles 面板上就会看到上图的盒模型。

在了解盒子模型前，让我们先学习边距、填充、和边框。

当html元素没有任何内容或宽高为0时，设置边距、边框、填充就没有任何意义了，所以这些都是建立在有内容的元素基础上的。

边距、填充、和边框

因为每一个html元素都是一个盒子，它有上下左右四个面，所以边距、填充、边框属性需要设置四个方向的值，可以简写也可以分开使用，语法如下：

简写语法：

margin: 10px 15px 20px 12px
padding: 10px 15px 20px 12px
border: 1px solid #ff0000

效果如下：

margin和padding在简写时是按照上、右、下、左的顺时针方向设置值的，这4个值不是必须都要设置的，你可以设置一个、2个、3个，但至少要一个值。

如果设置一个值时，其它方向都使用相同的值，如：

margin:10px;
padding:10px;

效果如下：

如果设置2个值时,如：

margin:10px 15px;
padding:10px 15px;

效果如下：

如上可以看到，下、左边距都是10px，下、左填充都是15px，缺省的方向会以使用反方向的值，同理当设置3个属性值时一样，缺省的那个会默认使用反方向的值。

拆分写法：

/*边距*/
margin-top: 10px;
margin-right:15px;
margin-bottom:20px;
maring-left:12px;
/*填充*/
padding-top: 10px;
padding-right:15px;
padding-bottom:20px;
padding-left:12px;
/*边框*/
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;

分开写法和简写的效果是一样的，这里注意边距、填充只有一个属性值，而边框有三个属性值：边框大小、边框样式、边框颜色，所以边框更加复杂点，边框还可以按照不同属性单独设置。

1、css 边距 —— margin

边距（margin）是指从边框边界向外的距离，为元素周围创建空间，它是透明的，如下箭头所示。

边距的重叠现象，当相邻的html元素都有边距时，会出现边距重叠而不是相加的效果，如下示例：

可以看到，盒子1的下边距和盒子2的上边距重叠了，它们的上下间距是10px，而不是20px。如果盒子1和盒子2的边距值不一样时也会重叠，只不过它们的间距会以其中最大的那个值显示，如下：

2个盒子上下间距实际以盒子2的边距显示，因为盒子2边距大于盒子1的边距。

2、css 填充 —— padding

填充就是从边框边界向内到元素内容边界的距离，如下绿色区域箭头示例：

3、css 边框 —— border

边框border，不同于margin、padding，它是可见的默认是有颜色的，如下示例：

盒子1边框宽度1px，盒子2边框宽度10px，都是红色边框，其盒模型图如下：

当border为0时，不显示边框。

之前介绍了边框的简写方法，是按照方向分别设置边框宽度、样式、颜色：

border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;

因为边框有三个属性值：宽度、样式、颜色，所以还可以按照不同属性值设置，如下：

border-color:red;
border-style:solid;
border-width:10px;

当按照属性值的维度设置的时候，同样可以继续按照方向拆分设置，如下：

设置边框宽度：

四个方向都是一样的边框宽度：

border-width:10px;

分别设置每个方向的宽度：

border-top-width:10px;
border-right-width:15px;
border-bottom-width:12px;
border-left-width:5px;

如下显示效果：

设置边框样式

样式分别有 dotted（虚线） 、solid（实线） 、double（双线） 、dashed（虚线）4个样式，如下：

四个方向都是一样的边框样式：

border-style: solid;

分别设置每个方向边框样式：

border-top-style:solid;
border-right-style:dotted;
border-bottom-style:double;
border-left-style:dashed;

如下效果：

当边框宽度为0时，设置边框样式或颜色是无效的。

设置边框颜色

四个方向都是一样的颜色：

border-color: red;

分别设置每个方向的颜色：

border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:orang;

显示效果：

当边框宽度为0时，设置边框样式或颜色是无效的。

盒子的实际大小

一个html元素在页面中显示的实际宽高并一定等于它的width和height属性设置的值。

标准盒模型

标准盒模型的width/height 不包含padding和border

如下图：

盒子1的实际显示尺寸等于height + border + padding之和，如图中盒子1占据的空间：高度126 = 100 + 20 + 6，宽度 136 = 100 + 30 + 6。

非标准盒模型

比如在之前Ie浏览器中，width/height 包含了padding和border。

这里使用box-sizing: border-box模拟非标准盒模型。

如下图：

可以看到，padding 和 border 被包含到宽度和高度里了。

如果想要改变盒子的计算方式可以使用 CSS Box Sizing 。

当box-sizing: border-box，是非标准盒模型。

当box-sizing: content-box（浏览器默认），为标准盒模型。

总结

1、盒子模型的概念，由边距、边框、填充和元素内容组成。

2、边距、填充和边框的语法使用，简写、拆分使用、按方向或属性值维度单独使用。

3、html元素实际显示宽度和高度计算方法。

4、标准盒模型和非标准盒模型的区别。

总而言之，css盒子模型是学习css的基础知识，后面一切都是建立在盒子模型之上的，所以要完全理解它，感谢关注，祝学习愉快。

上一篇：前端入门——css 选择器

两篇文章我们把「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前端进阶指南’原创，手动码字不易，小伙伴们别忘了顺手点个赞加个关注哈，有什么不懂的下方留言评论或私信。谢谢大家哈！