盒子模型与DOCTYPE

2019独角兽企业重金招聘Python工程师标准>>>

盒子模型都具有的属性：内容（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

盒子模型与DOCTYPE相关推荐

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
转载自:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们 ...
web前端：4_盒子模型与样式排版（手机壁纸切换）
1,块元素特征 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
CSS之布局（盒子模型--外边距）
盒子模型--外边距: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
CSS之布局（盒子模型--内边距）
盒子模型--内边距: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
CSS之布局（盒子模型—边框）
盒子模型-边框: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
CSS大小设置实例——盒子模型
一.浏览器效果和Dreamweaver设计视图: 二.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

盒子模型与DOCTYPE

盒子模型与DOCTYPE相关推荐

最新文章

热门文章