IE盒模型与W3C盒模型区别
前两天被⼈问到，叫我解释⼀下标准盒模型与IE盒模型，额，当时只能说，知道⼀点，但是没有深⼊的去探讨过，所以下来之后就⾃⼰写了例⼦，亲⾃去验证并且查看了⽹上的⼀些资料，现将其整理如下：
⼀、css盒模型图解
1.W3C标准盒⼦模型
从上图可以看出，w3c盒⼦模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。
2.IE盒⼦模型
从上图可以看出，IE盒⼦模型的范围包括margin、border、padding、content，和w3c盒⼦模型不同的是，IE盒⼦模型的content部分包含了padding和border.
⼆、实例加解释
1.⾸先我们来看⼀段代码：
<style>
.div1 {
width: 100px;
height: 80px;
border: 10px solid #000;
padding: 20px;
background-color: red;
margin: 50px;
}
</style>
<div class="div1">
111
</div>
运⾏结果：
1).w3c标准浏览器下⾯：
解释：这个盒模型，如果⽤标准w3c盒⼦模型解释那么这个盒⼦需要占据的位置为：
宽：100+20*2+10*2+50*2=260px ⾼：80+20*2+10*2+50*2=240px
盒⼦的实际⼤⼩为：
宽：100+20*2+10*2=160px ⾼：80+20*2+10*2=140px
2).IE6以下版本：
解释：
这个盒模型，如果⽤IE盒⼦模型解释那么这个盒⼦需要占据的位置为：
宽：100+50*2=200px ⾼：80+50*2=180px
盒⼦的实际⼤⼩为：
宽：100px ⾼：80px
三、总结
IE5.5及更早的版本使⽤的是IE盒模型。IE6及其以上的版本在标准兼容模式下使⽤的是W3C的盒模型标准。我们说这是⼀个好消息因为这意味着此盒模型问题
borderbox只会出现在IE5.5及其更早的版本中。只要为⽂档设置⼀个DOCTYPE，就会使得IE遵循标准兼容模式的⽅式⼯作。
另外，我们现在应该能理解了，css3的box-sizing属性给了开发者选择盒模型解析⽅式的权利。W3C的盒模型⽅式被称为“content-box”，IE的被称为“border-box”，使⽤box-sizing: border-box；就是为了在设现在去看这篇博客⾥⾯的关于width()的部分，应该更能理解了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。