首先理解什么是CSS中的盒子
当对一个文档进行布局的时候，浏览器渲染引擎会根据标准，将页面中的所有元素表示为一个一个矩形的盒子。在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。
块级盒子
- 盒子会换行显示
- width和height属性可以发挥作用
- 内边距padding外边距margin边框border会将其他元素从当前盒子周围推开
- 默认情况下盒子宽度会跟父容器一样宽
内联盒子
- 盒子不会换行
- width和height属性不起作用
- 垂直方向的内边距、外边距以及边框会被应用，但是不会把其它处于inline状态的盒子推开。
- 水平方向的内边距、外边距以及边框会被应用，并且会把其它处于inline状态的盒子推开。
通过对盒子display属性的设置，可以来控制盒子的外部显示类型。
什么是盒模型
模型定义了盒子的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。
组成
box model = margin + border + padding + content
- content 内容
- padding 内边距，盒子的内部区域，可以通过它设置content和border的距离
- border 边框，盒子的边框
- margin 外边距，盒子的外部区域，可以通过它设置相邻盒子间的距离
其中，除content外，margin、border和padding都分别有left、right、top和bottom四个属性。
类型
由于历史的原因，盒模型分为标准盒模型和怪异盒模型。可以通过box-sizing属性来声明盒模型的类型。
- content-box： 标准盒模型(默认)。
- border-box： IE盒模型，也称替代盒模型或怪异盒模型。
尺寸计算公式
标准盒模型：
- width = 内容宽度
- height = 内容高度
- 横向：margin-[left/right] + padding-[left/right] + border-[left/right] + width
- 纵向：margin-[top/bottom] + padding-[top/bottom] + border-[top/bottom]+ height
IE盒模型：
- width = padding +border + 内容宽度
- height = padding + border+ 内容高度
- 横向：margin-[left/right] + width
- 纵向：margin-[top/bottom] + height
区别
两种模型width和height的计算方式不同
