CSS3的Box模型

在使用width设置元素区域的时候，有一个比较大的陷阱，这个陷阱是有box模型引起的。

当我们对某个区域想要设置一个width的时候，有时会发现实际表现出来的大小要比我们预想的要大很多，其原因就是因为border和padding的值也被加算到width上了。

看一下具体的例子：

源代码为以下：

实际表现：

即使是设置了相同的width，但实际表现大小却不一样，这就是box模型导致的border和padding被叠加到width上的结果。

box-sizing

因为box模型导致即使是设置了相同的width，但实际表现大小却不一样的解决方案出现了，那就是box-sizing！

将CSS的属性box-sizing设置为border-box的话，就可以解决之前说的width陷阱问题了！

看解决结果前，先看一下box-sizing都有哪些属性存在：

注意：bootstrap默认的box模型为context-box！

再看一下实例：

源代码：

页面表现：

大小变一样了！