1. 什么是盒子模型
所有的 HTML 元素，我们都可以看成一个四边形，即一个盒子。
用 CSS 来设置元素盒子的 内边距、边框 和 外边距 的样式的方式，相当于设置盒子的样式，所以我们将其称之为 盒子模型
2. 边框：border
边框：HTML 元素盒子的框体
边框有四个属性可以设置：
border-top:上边框
border -right:右边框
border -bottom:下边框
border -left:左边框
格式： 粗细（px） 样式(solid double dashed dotted) 颜色
solid:实体线
double:双实体线
dashed:虚线
dotted:点虚线
示例：
通用性设置：
一次性设置上下左右边框样式 为 1 像素的 实体 红色线
border:1px solid red;
3. 内边距：padding
内边距：HTML 元素里的内容体 到 HTML 元素边框 的距离
内边距有四个属性可以设置：
padding-top:上边距
padding-right:右边距
padding-bottom:下边距
padding-left:左边距
4. 外边距：margin
外边距：HTML 元素边框 到 其他 HTML 元素边框的距离
外边距有四个属性可以设置：
margin-top:上边距
margin -right:右边距
margin -bottom:下边距
margin -left:左边距
5. 内外边距简化设置方式
以 padding 为例
总结：简化方式永远的顺序是 上右下左 的设置。
左被忽略，就看右的设置
下被忽略，就看上的设置。
只有一个，设置所有。
6. 单元素-水平居中
通过设置左右 外边距自动计算，我们可以控制元素居中。
格式：
margin:0px auto;
其中，上下外边距为 0（可自己更改），左右外边距根据 元素宽度和浏览器大小随时自动计算。
示例：
7. 相邻元素-外边距合并
外边距合并：两个相邻元素的接壤外边距仅最大的生效，较小的被合并。（被合并的外边距代码已经无用，所以一般我们会从代码上删除）（一般仅上下外边距有合并现象）
示例代码：
注意：
外边距合同通常发生在 margin-bottom 和 margin-top 之间。
左右外边距 一般不会合并
8. 父子元素-外边距塌陷
外边距塌陷：特指父子元素，因父元素无边框，父元素的外边距会塌陷到子元素中。导致子元素设置外边距，父元素会被级联作用。这样的现象叫做外边距塌陷。（四个外边距都会出现塌陷现象）
准备代码：
解决方案：
