W3C盒子模型和IE盒子模型及其检测

tjuking

浏览: 195020 次
性别:
来自: 北京

最近访客更多访客>>

生活就像攀登

AnonymMan

zhangxiaofei2012

it虫虫虫

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS&HTML

盒子模型 W3C IE DOCTYPE jquery

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盒子模型。

看看这简单代码在浏览器中的展示：