标准盒模型和怪异盒模型的区别
CSS盒模型：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
分为标准盒模型和IE盒模型/怪异盒模型
为了正确设置元素在所有浏览器中的宽度和高度，需要了解盒模型是如何工作的。
重点：
| 种类 | 总宽度 |
|---|---|
| 标注盒模型 | 标准模式下，一个元素所占据的总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right，高度同理。 |
| IE盒模型/怪异盒模型 | 在怪异模式下，一个块元素所占据的总宽度=margin-left+width+margin-right（即 width 已经包含了 padding 和 border），高度同理。 |
可以使用 box-sizing 属性来控制使用哪种盒模型。
box-sizing:content-box 是 W3C 盒子模型。
box-sizing:border-box 是 IE 盒子模型/怪异盒模型。