CSS盒子模式都具备的属性包括:内容(content)、填充(padding)、边框(border)、边界(margin)。
盒子模型分为两类:W3C标准盒子模型和IE盒子模型 (微软确实不喜欢服从他家的标准)
这两者的关键差别就在于:
- W3C盒子模型——属性高(height)和属性宽(width)这两个值不包含 填充(padding)和边框(border)
- IE盒子模型——属性高(height)和属性宽(width)这两个值包含 填充(padding)和边框(border)
我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型(需要在页面中声明DOCTYPE类型),这样可以避免多个浏览器对同一页面的不兼容。
因为如果不声明DOCTYPE类型,IE会将盒子模型解释为IE盒子模型,FireFox等会将其解释为W3C盒子模型;
而如果在页面中声明了DOCTYPE模型,所有的浏览器都会把盒子模型解释为W3C盒子模型。
请看下面一段代码:
<!DOCTYPE HTML>
<html>
<head>
<title>W3C.html</title>
<style type="text/css">
#test{
width:100px;
height:100px;
border:solid 10px red;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
以上代码显示的是W3C的标准盒子模型,去掉第一行就是IE盒子模型。
看看这简单代码在浏览器中的展示:
标准模型在两个浏览器中显示相同
IE盒子模型在不同浏览器中显示有差异,容易出现bug
另外,检测页面的盒子模型类别可以使用jQuery中的$.boxModel属性(现已经不再推荐使用)或者$.support.boxModel属性。如果返回值为true表示W3C盒子模型,如果为false则为IE盒子模型。