CSS Box Model
盒子模型：margin(外边距)，border(边框)，padding(内边距)，content(内容)。
类别
由于历史的原因，盒子模型有两个标准：
- IE盒子模型
- 标准盒子模型
这两个标准产生于浏览器厂商之间的竞争。
IE 盒子模型
IE 盒子模型认为：content = border + padding = width
盒子总宽度 = content + margin;
#container {
box-sizing: border-box; /* 将模型调整为 IE 盒子模型 */
width: 300px;
padding: 20px;
margin: 10px;
border: 10px solid green;
background: blue;
}
我们可以使用谷歌浏览器查看一下，整个盒子的总长度为 320px
width +margin-left + margin-right = 300 + 10 + 10 = 320px。
borderBox.png
我们将width调整为300px，只有外边距可以影响盒子的宽度。
标准盒子模型
标准盒子模型认为 width = margin + border + padding + content
#container {
box-sizing: content-box; /* 将模型调整为标准盒子模型 */
-moz-box-sizing: content-box;
width: 300px;
padding: 20px;
margin: 10px;
border: 10px solid green;
background: blue;
}
当我们设置宽度时，content会自动调整，我们设置margin/border/padding都不会影响盒子的宽度。
contentBox.png
当我们设置width 的时候：盒子的长度就等于内容的长度，其余部分很容易计算。
