共计 1047 个字符，预计需要花费 3 分钟才能阅读完成。
盒子模型
IE5.5 及更早的版本使用的是 IE 盒模型。IE6 及其以上的版本在标准兼容模式下使用的是 W3C 的盒模型标准。
盒子模型组成为：margin、border、padding、content。
CSS 盒子模型分为：标准 W3C 盒子模型，IE 盒子模型。两者最大不同在于对于 css 的 width 和 height 的大小设置。下面所说的 width 和 height 是 css 中的宽高。
IE 盒子模型
IE 盒子模型的 width = contentWidth + padding-left + padding-right + border-left + border-rightIE 盒子模型的 height = contentHeight + padding-top + padding-bottom + border-top + border-bottom
意味着 IE 盒子的 width 和 height 的大小是上述属性相加的最大总和。若 content 的大小、padding 大小、border 的大小总和大于 css 设置的宽高。例如增加 padding 宽度大小使得盒子宽度大于设置的宽度会将 content 的大小被压缩，最终 content 大小会变为 0。box 的总宽度会大于设置的 width 大小。
#ie_box {
margin: 30px;
width: 200px;
height: 200px;
background-color: bisque;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
border: 5px solid brown;
}
标准 W3 盒子模型
W3 盒子模型的 width = contentWidth W3 盒子模型的 height = contentHeightW3 盒子模型大小计算就简单多，css 设置的 width 和 height 就是 content 内容大小。padding、border 的大小并不会影响 content 的大小。
#w3_box {
margin: 30px;
width: 200px;
height: 200px;
background-color: bisque;
padding: 10px;
border: 5px solid brown;
}
小结
对于 ie 和 w3 两种盒子模型，相比较而言 w3 盒子模型会比 ie 盒子模型更好用些，也不容易混淆 css 中的 width 和 height，同时也方便计算盒子的实际宽高大小，也不会出现 ie 盒子模型由于属性设置超出预设宽高而挤压 content 显示。
