1. 简单介绍下css盒模型

盒子模型整体上适用于 区块盒子，定义了盒子的不同部分如何协同工作，用来创建一个在页面中可以看到的盒子，行内盒子使用的只是盒模型中定义的部分行为。

盒模型的各个部分

1. 内容盒子：确定大小（$\color{red}{width、height}$ 等属性）
2. 内边距盒子：填充位于内容周围的空白处（$\color{red}{padding}$ 等属性）
3. 边框盒子：包住内容和任何填充（$\color{red}{border}$ 等属性）
4. 外边距盒子：最外层，包裹内容、内边距和边框（$\color{red}{margin}$ 等属性）

盒模型分类

以下示例均参考下图数值

css 标准盒模型

• width属性设置的宽度即为内容的宽度，那么盒子占据的宽度为$\color{red}{width+padding*2+border*2}$

css 替代盒模型 (怪异盒模型)

• width属性设置的宽度即盒子的宽度，内容的宽度为 $\color{red}{width-padding*2-border*2}$

实际应用

• 按照UI设计稿开发页面，选用「怪异盒模型」更合适，只要设置了所有元素的宽度即可，无需担心盒子内部边框及内边距的调整后影响整个页面布局。
• box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。