引言
CSS把网页中的每一个元素都看做是一个矩形盒子，页面布局的本质就是无数个矩形盒子的排布、叠加、留白和尺寸控制。 盒模型四要素： 内容 content、内边距 padding、边框 border、外边距 margin
一、元素三大显示特性（display）
1.1 块级元素（block）
- 独占一行，默认宽度撑满父级
- 宽度、高度、padding、margin全部生效
- 可容纳块级、行内元素
- 常见块级元素：div、p、h1~h6、ul、li、form
1.2 行内元素（inline）
- 同行显示，不换行
- 宽度和高度无效，由内容决定
- 上下 padding 和上下 margin 无效，左右生效
- 常见行内元素：span、a、b、i、em
1.3 行内块（inline-block）
- 同行排列，不换行（行内）
- 宽度、高度、padding、margin全部生效（块级）
- 常见行内块：img、input、button
二、盒模型四要素详解
2.1 content（内容区）
这是盒子模型的核心，元素真正存放文字、图片、子元素的区域
关键属性： width、height
2.2 padding（内边距）
内容与边框之间的距离，避免内容紧贴边框，属于盒子内部，会撑大盒子，背景色会覆盖 padding 区域。
简写规则（顺时针）：padding：上 右 下 左
2.3 border（边框）
盒子的边线，会撑大盒子，支持粗细、颜色、样式。
组成元素：边框宽度、线型、颜色
2.4 margin（外边距）
盒子与盒子之间的外部留白，实现元素之间的间距、居中效果，不影响盒子本身大小。
三、标准盒模型vs怪异盒模型
3.1 标准盒模型
写法：box-sizing: content-box
规则：width = 内容区宽度
计算公式：盒子宽度 = width + 左右padding + 左右border
特点：布局很难控制，在修改 padding、border 时会把盒子撑大，导致页面布局错乱
3.2 怪异盒模型
写法：box-sizing: border-box
规则：width = 整个盒子宽度
计算公式：盒子宽度 = 原本内容的width = 压缩后的内容width + 左右padding + 左右border
特点：修改 padding、border 不会撑大盒子，只会压缩内部内容区尺寸，布局稳定
四、关于margin塌陷的问题与解决
margin塌陷是最容易产生的问题：垂直方向的 margin 会合并，不会叠加（水平方向不会塌陷）
4.1 兄弟元素塌陷
问题产生：上盒子的 margin-bottom 与 下盒子的 margin-top 相遇，会取两者最大值作为最终的间距，而不是 margin-bottom + margin-top
解决方法：统一只给一个盒子设置单侧 margin
4.2 父子元素塌陷
问题产生：父元素没有边框、内边距、溢出隐藏时，子元素的 margin-top 会穿透父元素，作用到父元素外侧，导致父元素整体下移
解决方法：
- 给父盒子设置 border
- 给父盒子设置 padding
- 给父盒子添加 overflow: hidden
- 使用 flex 弹性布局
五、基于盒模型的居中方案
块级元素水平居中
注：必须设置宽度，margin：0 auto 才能生效
div {
width: 300px;
margin: 0 auto;
}
