CSS的两种盒模型

CSS的两种盒模型

关于css的盒子模型相信学习前端的同学都有所耳闻，因为它太基础太重要了。

提起盒子模型，大家可能会想到content，padding，border，margin这些词汇，还有也许还会想起盒子模型有两种，比如ie的盒子模型与w3c的盒子模型，那么我们怎么来区分呢？

先来看看w3c的盒子模型：

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

再看看ie的：

IE 盒子模型的范围也包括 margin、border、padding、content，看起来好像没什么不一样，如果仔细观察就可以发现其实ie的盒子模型的width与height是在border外侧来计算的。

我们现在来实际试一个实际的例子看看它们两个的区别：

我们设置一个盒子成这样：

margin:10px,border:20px,padding:30px;width:400px;height:500px;

那么对于w3c而言其占据的实际高度为：10*2+20*2+30*2+500=620px;

实际占据的宽度为：10*2+20*2+30*2+400=520px;

盒子实际的高度为：20*2+30*2+500=600px;

盒子实际的宽度为：20*2+30*2+400=500px;

对ie而言呢：

其占据的实际高度为：10*2+500=520px;

实际占据的宽度为：10*2+400=420px;

盒子实际的高度为：500px;

盒子实际的宽度为：400px;

其实在css3出来之后我们又有了“新的盒子模型”了，而且也是分为两种（注：box-sizing的属性值好像还有padding-box但是我查 css参考手册却没有查到，先不管吧 ）：

box-sizing:content-box | border-box，其中 content-box是默认的值。

理论上说，content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。这样说来上面的 ie盒子模型不就 刚好与border-box对上号了吗。很多人觉得border-box才是我们真正需要的盒子模型，比如boostrap就使用了border-box，看来微软设计的盒子模型还是有 其高明之处的。