在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 选择器