盒子模型与DOCTYPE

最新推荐文章于 2024-05-17 13:52:13 发布

chenhui5166

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量87

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/No5stranger/blog/209410

版权

盒子模型都具有的属性：内容（content）、填充（padding）、边框（border）、边界（margin）；

W3C标准盒子模型定义：

从图中可以看到： W3C标准盒子模型width和height只是content的宽度和高度，不包括padding、border、margin；

IE盒子模型：

从图中可以看到：IE盒子模型width和height包括content、padding、border的宽度和高度；

Example：一个盒子的css样式为：{margin: 20px; border: 1px; padding: 10px; width: 200px; height: 50px;}，如果用W3C标准盒子模型解释：盒子占用的宽度：20*2+1*2+10*2+200=262px，高度：20*2+1*2+10*2+50=112px，实际宽度：1*2+10*2+200=222px，实际高度：1*2+10*2+50=72px；如果用IE盒子模型解释：盒子占用的宽度：20*2+200=240px；占用的高度：10*2+50=70px，盒子实际的宽度：200px，实际高度：50px。这就是两者之间区别。

那到底该用哪种模型呢？当然是W3C标准盒子模型了，W3C标准盒子模型兼容所有浏览器。那该怎么确定页面渲染是按照W3C标准盒子模型呢？只要在页面顶部加上DOCTYPE（具体DOCTYPE说明，点这）申明，浏览器就会按照W3C标准渲染，如果不加DOCTYPE申明，浏览器会按照本身默认标准去渲染页面，除IE外所有浏览器按照W3C标准盒子模型渲染页面，至于IE吧，当然会按照IE盒子模型渲染页面了，只要加上DOCTYPE强制IE采用标准盒子模型渲染页面。

下面我们测试一下：($.support.boxModel 在jQuery 1.10之后被去掉)

Test1：

<html>
<head>
<meta charset="utf-8">
<title>HTML BOX MODEL</title>
</head>
<style type="text/css">
#header {
	width: 100px;
	height: 50px;
	padding: 30px;
	border: solid 5px red;
}
</style>
<body>
<div id="header">
    <p id="p">This is a word!</p>
</div>
</body>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    var theBox = $.support.boxModel ? "标准W3C" : "IE";
    alert("页面支持：" + theBox + "盒子模型");
</script>
</html>

这个页面头部没有DOCTYPE申明，所有浏览器下，$.support.boxModel 都为false，即弾框显示IE盒子模型，这个$.support.boxModel有一定的误导性。从实际页面渲染效果就很明显看出Chrome与IE之间的区别：（在IE7-IE9下，如果没有指定DOCTYPE，会默认按照IE盒子模型，但从IE10之后，微软逐渐向W3C靠拢，所以两者盒子模型差别不大）：

Test2：（添加DOCTYPE 说明）

<!DOCTYPE html>
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<html> 
<head>
 <meta charset="utf-8">
 <title>HTML BOX MODEL</title>
</head>
<style type="text/css">
#header {
 width: 100px;
 height: 50px;
 padding: 30px;
 border: solid 5px red;
}
</style>
<body>
 <div id="header">
 <p id="p">This is a word!</p>
 </div>
</body>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    var sBox = $.support.boxModel ? '标准W3C' : 'IE';
    alert("页面支持：" + sBox + "盒子模型");
</script>
</html>

添加DOCTYPE说明后，所有浏览器下$.support.boxModel 的值都为true，即弾框显示W3C标准盒子模型，从页面实际渲染效果看，的确按照W3C标准模型渲染，特别是在IE浏览器下。

所以，从测试结果看，DOCTYPE 申明直接影响页面渲染效果，特别是在IE7-IE9下，所以为了所有页面的标准和较少不必要的bug，每个页面严格进行DOCTYPE说明。

转载于:https://my.oschina.net/No5stranger/blog/209410

chenhui5166

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型与DOCTYPE

盒子模型都具有的属性：内容（content）、填充（padding）、边框（border）、边界（margin）； W3C标准盒子模型定义：从图中可以看到： W3C标准盒子模型width和height只是content的宽度和高度，不包括padding、border、margin； ...
复制链接

扫一扫