在html页面中，所有可见的html标签元素都是由margin、padding、border 和内容组成的，专业术语称盒子模型或框模型，后面统称为盒子模型。
如下图示例：
盒子模型
按F12键打开开发者工具，使用选择元素工具（箭头图标），随便选择一个html元素，在下方styles 面板上就会看到上图的盒模型。
在了解盒子模型前，让我们先学习边距、填充、和边框。
当html元素没有任何内容或宽高为0时，设置边距、边框、填充就没有任何意义了，所以这些都是建立在有内容的元素基础上的。
边距、填充、和边框
因为每一个html元素都是一个盒子，它有上下左右四个面，所以边距、填充、边框属性需要设置四个方向的值，可以简写也可以分开使用，语法如下：
简写语法：
margin: 10px 15px 20px 12pxpadding: 10px 15px 20px 12pxborder: 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 选择器
