盒子模型是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盒子模型详解 #### 一、引言 在Web前端开发领域，理解和掌握CSS（层叠样式表）是至关重要的。CSS中的一个重要组成部分就是盒子模型，它对于网页布局有着不可替代的作用。在CSS中存在两种...
在Web开发中，有两种主要的盒子模型：IE盒子模型和标准W3C盒子模型，这两种模型对于元素尺寸的计算方式有所不同，因此对页面布局有着深远的影响。 **标准W3C盒子模型**遵循W3C规范，它将每个HTML元素视为一个矩形...
然而，IE6在某些情况下采用了不同的盒子模型，这导致了与遵循W3C标准的其他浏览器（如Firefox）的显示差异。 首先，我们来看IE6在标准模式下的盒子模型。当声明文档类型（DOCTYPE）为XHTML 1.0 Transitional或更...
本文将深入探讨CSS中的两种主要盒子模型——标准盒子模型与IE盒子模型，并详细对比它们之间的区别。 #### 一、盒子模型概念 在CSS中，每个HTML元素都可以被视为一个矩形盒子，这个概念称为“盒子模型”。每个盒子...
由于IE盒子模型与W3C盒子模型的差异，开发者在编写CSS时可能会遇到兼容性问题。为了解决这个问题，可以使用`box-sizing`属性。将`box-sizing`设置为`border-box`可以让元素遵循IE盒子模型，而`content-box`则保持W3C...
CSS有两种盒子模型：IE盒子模型（也称怪异盒子模型）和标准盒子模型。默认情况下，现代浏览器使用标准盒子模型，其中元素的总宽度和高度由内容宽度+边框+内边距+外边距组成。而在IE6及以下版本中，元素宽度仅包含...
- **IE盒模型（怪异盒模型）**：内容宽度加上边框和内填充决定元素总宽度，更符合直觉但与W3C标准不一致。 3. **CSS设置盒模型** - 使用`box-sizing`属性可以切换盒模型类型。例如，`box-sizing: border-box;`...
虽然W3C标准定义了盒子模型，但早期的IE浏览器（尤其是IE6和IE7）采用了一种不同的实现，称为“怪异盒模型”。这导致了跨浏览器的布局问题。为解决这个问题，可以使用`*{box-sizing:border-box}`进行全局设置，使...
在CSS3中，还引入了盒模型的两种模式：W3C标准盒模型和IE盒模型（也称为怪异盒模型）。W3C标准盒模型中，元素的width和height只包括内容区，而IE盒模型则包括内容区、内边距和边框。为了避免浏览器之间的兼容性问题...
在早期的Internet Explorer浏览器，即IE6、IE7和IE8，它们并不支持CSS3的一些新特性，如圆角和阴影效果。这些特性在现代浏览器中已经非常常见，可以为网页设计提供更丰富的视觉体验。为了让这些老版本的IE浏览器也能...
IE6及更早版本采用了不同的盒子模型（称为"怪异模式"），其中元素的宽度和高度会包含内边距和边框。为了避免这种兼容性问题，可以使用`box-sizing`属性来统一盒子模型，例如`box-sizing: border-box;`会让元素的总...
在CSS中，盒子模型有两种模式：W3C标准盒模型和IE盒模型。在W3C标准盒模型中，元素的总宽度和高度等于内容的宽度和高度加上内边距和边框；而在IE盒模型（也称为怪异盒模型）中，元素的总宽度和高度只包括内容的宽度...
标题“盒子属性和HTML项目”暗示了我们即将探讨的是网页设计中的盒模型概念以及与HTML元素相关的属性。在这个话题中，我们将深入理解HTML元素如何在网页布局中占据空间，以及如何通过CSS控制这些元素的外观和行为。 ...
IE quirk 模式下盒子的宽度计算： 在 IE quirk 模式下，盒子的宽度等于左边框＋左填充＋宽度＋右填充＋右边框。 CSS 盒子模型的计算题： 如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的...
内容概要：本文详细讲解了 CSS 盒子模型的各项关键概念及其具体属性的设置方法，覆盖从内容宽度到高度、内外边距（padding）、边界（border）、外边距（margin），还涉及到盒模odel-radius 和 text-shadow 属性的...
CSS盒子模型有两种不同的解析方式：标准盒模型（W3C Box Model）和IE盒模型（IE Quirk Mode）。在标准盒模型中，元素的总宽度和高度计算公式为：内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
1.1 W3C盒子模型(标准盒模型) 1.2 IE盒子模型(怪异盒模型) 2.1 标准模型和IE模型的区别