深入理解盒模型
盒子模型是什么
在 HTML 中，所有的文档元素被表示为一个元素盒子，这个盒子描述了元素在文档布局中所占的空间大小，并且相互影响。而确定这些盒子的尺寸、属性和位置是渲染引擎的目标。
直接上图：
css-001-01
打开 Chrome 浏览器，按下 F12 ，可以在 Elements->Styles 下找到这个盒子模型图。
盒子模型从内向外，依次是内容区（即 width 和height），padding， border，以及 margin。
盒子模型的分类以及区别
在CSS中盒子模型被分为两类，一是 W3C 标准模型，二是 IE 怪异盒模型。
这两种盒子模型的主要区别是对盒子宽度和高度的定义不同：
W3C 标准模型规定元素的宽高为内容区尺寸，即 Chrome 浏览器中蓝色部分（见上图）。
而IE怪异盒模型则规定元素的宽高为可见区域尺寸，即 width = contentWidth + padding + border, height = contentHeight + padding + border。（注：这里使用 contentWidth 和 contentHeight 表示内容区的宽高，实际上并没有这两个属性）。
现假设一个盒子：
margin: 20px; padding: 10px; border: 1px; content: 100px*100px;
现在分别使用两种盒子模型来计算盒子所占据的空间和盒子的宽：
| W3C 标准模型 | IE 怪异盒模型 | |
|---|---|---|
| 盒子需要占据的空间 | 100+20x2+10x2+1x2=162 | 100+20x2=140 |
| 盒子的宽 | 100 | 100-10x2-1x2=78 |
上表只计算的是水平尺寸，垂直尺寸计算方式一致。
box-sizing
现浏览器对元素的表现多基于 W3C 标准盒模型，这样其实很不方便。所以CSS3中新增了box-sizing 属性，这个属性用于预先定义盒模型的表现形式。
值：content-box | border-box | padding-box |inherit
初始值：content-box
应用于：块级元素和替换元素
继承性：无
注意：
- IE7并不支持此属性。关于兼容性可以查看 Can I use?
- 只用 FF 浏览器支持
padding-box。
通常好的做法是在 CSS Reset 中预先定义：
* {
box-sizing: border-box;
}
