盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：
从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
ie 盒子模型
从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 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、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。
那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
再用 jquery 做的例子来证实一下。
代码1：
<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
上面的代码没有加上 doctype 声明，在 ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。
代码2：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是标准w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
代码2 与代码1 唯一的不同的就是顶部加了 doctype 声明。在所有浏览器中都显示“标准 w3c 盒子模型”。
所以为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型。
分享到：
相关推荐
IE盒子模型和标准W3C盒子模型.盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。
其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。 盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释...
简单比较了一线标准盒子模型与IE盒子模型的不同
网页里有两种盒子模型标准一是W3C盒子模型；二是IE盒子模型（IE浏览器默认的模型）下面就用公式来区分这两种不同的盒子模型
让IE6、IE7、IE8支持CSS3的圆角、阴影样式.
1.1 W3C盒子模型(标准盒模型) 1.2 IE盒子模型(怪异盒模型) 2.1 标准模型和IE模型的区别
2010-8-18 去腾讯面试，问IE6。...结论：标准模式时，IE6浏览器采用W3C盒子模型，此时IE6、Firefox表现一致。 代码： 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional
原生JS弹窗盒子,是本人独立开发的后台通用系统SYSUI的扩展js插件,纯js,不依赖jquery库。经测试，支持IE6，7，8，IE,360,火狐，谷歌，safari等主流浏览器，支持移动端,支持扩展。是一款不错的前端弹窗插件。
盒子模型分为标准盒子模型和IE盒子模型。 标准盒子模型中，width和height是指内容区的宽高； IE盒子模型中，width和height是指content+padding+border的总宽高。 --------------------- 本文来自 bertZuo 的CSDN...
该拖拽支持IE浏览器、火狐浏览器以及谷歌浏览器，实现方法较为稳定，可以设置父盒子的高度、以及宽度，超出后可出现滚动条，能够有效的集成到项目中
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： <...
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。 例：一个盒子的 margin 为 20px，border 为 1px，...
一个盒子的构成：盒子中的内容：content盒子的边框：border盒子边框与内容之间的距离：称为填充—padding内边距（内补丁）如果有多个盒子存在，盒子与盒子之间的距离：称为边界—margin，外边距（外补丁） ...
因为经常做后台管理系统，时不时都要去下一些框架，然而有时候仅仅只是需要一个页面框架布局，却需要引入一大堆文件，于是，自己用css弹性盒子（flex）简单做了一个管理系统布局，代码简单，下载即用。不是说人家...
50道CSS基础面试题（附答案） 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 2 box-sizing属性？ 3 CSS选择器有哪些？哪些属性可以继承？
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...
该资源适合入门，使用原生js写一个音乐盒子，这个项目属于纯前端项目，没有任何接口，所以特别适合入门学习。并且使用了一些H5新特性，对版本低的ie不兼容
腾讯游戏盒子官网首页html代码，非常简单明了，这也是目前很...页面下半部分的圆形图标使用了CSS3 transform旋转属性，当鼠标移动到圆形图标上面时会顺时针旋转20度，动态效果，但IE6–IE9不支持该属性，所以没有效果。