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. 父子元素-外边距塌陷

外边距塌陷：特指父子元素，因父元素无边框，父元素的外边距会塌陷到子元素中。导致子元素设置外边距，父元素会被级联作用。这样的现象叫做外边距塌陷。（四个外边距都会出现塌陷现象）

准备代码：

解决方案：