前言

我喜欢把复杂问题简单化，把简单问题更简单化，看到网上介绍CSS盒模型的文章写那么多，觉得还是有必要自己再总结一下。

CSS3出现以前

首先，CSS3之前，关于盒模型有这两种，一种是W3C标准盒模型，一种是IE盒模型（低版本IE或者缺少!DOCTYPE会触发此模式）。

• 所谓W3C标准盒模型，就是实际内容宽度等于设置的宽高度（不包括padding和border）；
• 所谓IE盒模型，就是实际内容宽度等于设置宽高度减去padding+border；

怎么样，够简单吧，看个例子：

<style>
.test {
	width: 200px;
	height: 160px;
	background: #B0F9FF;
	border: solid 10px #2196F3;
	padding: 20px;
}
</style>
<div class="test">这是W3C标准盒模型</div>

再看IE盒模型：

CSS之后

CSS3新增一个名叫box-sizing的属性，它两个值：

• 当设置box-sizing:content-box时，将采用W3C标准盒模型解析，默认为content-box；
• 当设置box-sizing:border-box时，将采用IE盒模型解析；

为避免不同盒模型带来布局的差异，一般在开发刚开始就应该把盒模型确定下来，否则会带来致命性的布局错乱，bootstrap直接强制给所有元素强制设置为border-box：

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
:before, :after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

所以可以看到，虽然名字叫IE盒模型，但是这种模型反而更加常见。