浅谈CSS3中的content-box和border-box的区别

content-box是符合w3c标准的盒模型，也是默认的盒模型

border-box是不符合w3c标准的盒模型，也称为怪异盒子

他们二者有什么区别呢？

content-box是先根据设定的样式确定元素content的宽高，有border和padding的情况下再额外增加盒子的宽高，内容宽高不受影响，设定多少就是多少。

border-box是先根据设定的样式固定盒子的宽高，如果有border和padding的情况下，再根据盒子的宽高减去border或者padding，内容的宽高会受到影响，会被减去border或者padding。

例子：

样式：
    div {
                    width: 100px;
                    height: 50px;
                    padding: 10px;
                    border: 5px solid red;
                    margin: 15px;

    }
    div.content-box{
        box-sizing:content-box;
    }
    div.border-box{
        box-sizing:border-box;
    }
    
   内容：
    <div class="content-box">
             content-box
    </div>
    <div class="border-box">
             border-box
    </div>
    <div>
              default
    </div>
   解释1：我们设定了三个div盒子，第一个的样式设定为符合w3c标准（ box-sizing:content-box;）的盒子，宽高分别为100px和50px；有10px的padding和5px的border，内容的宽高由样式的宽高设置决定，为100px和50px，但是它还有10px的padding和5px的border。正常模式盒子的宽高为contents + padding + border

所以第一个div盒子的最终宽为：contents的宽(100px)  +  padding(10px)*2(两边)  +  border(5px）*2（两边）。

最终它的宽为100+20+10 = 130px；

同理它的高为：contents的高(50px)  +  padding(10px)*2(两边)  +  border(5px）*2（两边）。

最终它的宽为50+20+10 = 80px；

如图所示：

结论：contents没有受到影响依旧为100px和50px，但是整个盒子模型的宽高增大了。从100和50变为130和80

解释2：我们给第二个div盒子设定的为怪异模式的盒子（box-sizing:border-box），怪异模式情况下，它是先根据样式设定的宽高固定盒子的宽高，如果有border或者padding，它会把padding和border算进盒子的宽高里面去，contents就会被压缩。

我们给第二个div的宽高分别为100px和50px；有10px的padding和5px的border，它先固定盒子的宽高为100px，现在有border和padding，它contents的宽高会就减去border和padding的宽高。最终它的宽高没有增加，内容的宽高会被压缩。

所以第二个div盒子的宽最终为：contents的宽(100px)  -  padding(10px)*2(两边)  -  border(5px）*2（两边）

最终它的宽为：100-20-10 = 70px；

同理它的高为：contents的高(50px)  -  padding(10px)*2(两边)  -  border(5px）*2（两边）。

最终他的高为50-20+=-10 =20px；

如图所示：

结论：contents受到了压缩从100和50变为70和20，所以文字溢出了。但整个盒子模型的宽高没变，依旧为100和50

在看看我们设定的最后·那个盒子，由于我们没有指定他的box-sizing属性，它默认为box-sizing:content-box;

所以他如图所示和第一个div是一样的

 

总结：

　在IE中（也就是怪异模式），块元素的width = content + padding + border；比如设定元素width = 100px，padding = 10px，那么实际的内容区域宽度为100-10*2px，也就是固定宽度后，如果设定border或者padding会压缩内容区的宽度；

　在W3C标准中，元素的width = content，比如设定元素width = 100px，padding = 10px，那么实际内容宽度就为100px；整个元素的宽度为100+10*2px，也就是设定额外的padding或border会向外扩张元素的大小；