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会向外扩张元素的大小;