前言

在前端面试的过程中，CSS盒模型是一道问的频率非常高的问题。目前网上也有很多解释CSS盒模型的文章，看了之后自己也总结了下相关知识点，大家一起来看看吧。

感兴趣的同学可以加下我自己维护的群624-576-634。

CSS

CSS盒模型-What？

我们首先要了解的一个内容就是，什么是CSS盒模型呢？

简单点说我们可以把一个HTML页面看做一个大的方块，在这个大的方块里会嵌套很多小方块（DOM元素），然后小方块又会嵌套其他的小方块，这样一层层的嵌套着就构成了一个盒模型。

既然页面的结构都是由一系列HTML标签构成，为什么还会有不同的盒模型呢？

想当年微软的IE浏览器占据超过80%市场份额的时候，觉得自己财大气粗(是不是有点黑-_-!)，想自己独立制定一套浏览器标准，其中就包括IE的盒模型，但是其他诸如Mozilla，Google等公司不同意IE的做法，他们遵循的是W3C的标准来定制浏览器，也就是W3C标准盒模型，因此就造成了现在浏览器不同的CSS盒模型了。

接下来我们具体看看IE盒模型和W3C盒模型有什么具体的不同吧。

对比

W3C标准盒模型

元素的width和height属性只包含内容content部分，不包含内边距padding和边框border部分。

IE标准盒模型

元素的width和height属性同时包含内容content，内边距padding和边框border部分，即：

width = content + padding + border

使用

那么我们该如何切换两种盒模型的展示呢？

在IE8及以下的浏览器中只支持IE盒模型，在IE8+及其他主流浏览器中，通过CSS新增的box-sizing属性可以设置浏览器的盒模型。box-sizing属性的默认值是content-box，即W3C标准盒模型；而将box-sizing值设置为border-box时，则会更改为IE盒模型。

接下来我们通过代码和界面效果来看看两种盒模型的差异。

效果展示

以下测试都在Chrome浏览器中进行。

W3C盒模型

首先定义一个div，有如下CSS属性。

定义一个div

如上所讲，在不设置box-sizing属性的情况下会采用W3C标准盒模型，在页面呈现的结果如下所示。

页面效果

左侧是HTML页面的效果，右侧是通过查看浏览器的style效果。从中可以看出内容宽度(浅蓝色部分)为100px，横向实际占据的空间为content+padding+border，也就是100px+20px*2+10px*2=160px，乘以2是因为有左右两个方向。

IE盒模型

同样的元素我们再看看在IE盒模型下是什么样的展示。只需要添加box-sizing: border-box;属性即可。

css样式

其呈现的效果如下图所示。

页面效果

从图中可以看出，width设为100px，其占据的宽度也就是100px，其中实际内容的宽度只有40px大小(浅蓝色部分)，padding-left和padding-right各占20px，border-left和border-right各占10px，因此是40+20*2+10*2=100px。

由以上的例子就可以很明显的看出IE盒模型和W3C标准盒模型的区别了。

关于margin

不管是在IE盒模型还是W3C标准盒模型中，margin产生的效果是一样的，都是会占用实际的空间，但是不改变盒子大小。

我们在上面例子的CSS属性中再加入margin: 30px;

首先看看在IE盒模型下效果图如下。

IE盒模型

通过上图可以看出盒子需要占据的空间宽度为100+30*2=160px，而盒子实际宽度仍然为100px。

然后看看在W3C标准和模型下的效果。

W3C盒模型

通过上图可以看出盒子需要占据的空间宽度为100+20*2+10*2+30*2=220px，而盒子的实际宽度为100+20*2+10*2=160px。

总结

今天这篇文章通过图例和代码讲解了CSS中两种不同的盒模型，分别是IE盒模型和W3C标准盒模型，大家都学会了吗？