真正的盒模型-border-box

长期以来,w3c的盒模型都是很恶心的,我们设置了一个盒子的width和height,如果我们要再去给其设置padding,border,那么它的真实大小是width/height+padding+border,如下:

width: 200px;
height: 200px;
background: #888;
text-align: center;
border: 10px #5cb85c solid;
padding: 20px;

默认盒模型

大家可以用浏览器调试发现,这个设置的灰色部分是width/height,白色部分是padding,绿色部分是border,你会发现,这样加起来实际宽高是260px;这即为w3c的盒模型标准,然而这样的标准跟我们日常理解是有冲突的,并且造成的问题很多,比如我们给一个元素设置了宽高,再去设置padding和border我们就必须去计算,然后从width/height中减去这一部分.非常麻烦.我们通常理解应该是设置了宽高即为总的宽高,再去设置padding和border它依旧那么大.
如下:

width: 200px;
height: 200px;
background: #888;
text-align: center;
border: 10px #5cb85c solid;
padding: 20px;
box-sizing: border-box;

我们心目中的盒模型

你会发现这样才是我们心中的盒模型,padding+border+content=width/height,两者相差仅仅一个box-sizing的属性
在我们吐槽这个w3c组织的恶心的标准的时候,我们一直唾弃的IE实际上早已解决了这个问题,在ie6之前,ie的盒模型即是这样的,ie6/7下的怪异模式也是这样的,历史原因就不详谈了,我们谈一下解决办法.
坑比的w3c为了给当年的错误擦屁股,在css3中增加了这个属性,box-sizing:border-box|content-box;这个属性两个取值就代表了两种盒模型,border-box即为我们希望的,content-box即为w3c默认的盒模型.
用法就是这么简单,目前这个属性能够兼容IE8,基本常用的都能兼容了.
用这个属性你就会有很多方便,比如我们不需要去计算盒模型大小了,在切图时直接测量整个部分的大小,设置width/height,然后继续设置padding和border都不会影响盒子大小了.需要注意的是我们常常使用的bootstrap框架在3以后的版本就全部使用的是border-box盒模型,所以当你使用bootstrap框架的时候,你就要注意这里面的盒模型的不同了.