从上图可以看到标准 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 盒子模型。
相关推荐
在CSS中存在两种主要的盒子模型：IE盒子模型（又称为怪异盒子模型）和标准W3C盒子模型。这两种模型对于元素的尺寸计算方式有所不同，了解这些差异对于确保网页在不同浏览器中的一致性显示至关重要。 #### 二、标准...
网页设计中的两种主要盒子模型，即W3C盒子模型和IE盒子模型，是理解CSS布局的关键因素。这两种模型在计算元素的实际尺寸时有着显著的区别，从而影响到元素在页面上的表现。 1. W3C盒子模型（标准模型） W3C盒子模型...
在Web开发中，有两种主要的盒子模型：IE盒子模型和标准W3C盒子模型，这两种模型对于元素尺寸的计算方式有所不同，因此对页面布局有着深远的影响。 **标准W3C盒子模型**遵循W3C规范，它将每个HTML元素视为一个矩形...
盒子模型是CSS布局的核心概念，它将每个HTML元素视为一个具有边距（margin）、边框（border）、内填充（padding）和实际内容的矩形盒子。 1. **盒子模型的概念** - **内容（Content）**：这是元素的实际文本或图像...
CSS盒子模型有两种类型：W3C标准盒子模型和IE盒子模型（也称为怪异盒模型）。在标准模型中，元素的总宽度和高度等于内容区域加上内边距和边框；而在IE模型中，总尺寸仅包含内容区域，内边距和边框被加到了总宽度和...
虽然W3C标准定义了盒子模型，但早期的IE浏览器（尤其是IE6和IE7）采用了一种不同的实现，称为“怪异盒模型”。这导致了跨浏览器的布局问题。为解决这个问题，可以使用`*{box-sizing:border-box}`进行全局设置，使...
W3C标准盒模型中，元素的width和height只包括内容区，而IE盒模型则包括内容区、内边距和边框。为了避免浏览器之间的兼容性问题，通常推荐使用W3C标准盒模型，并可以通过`box-sizing`属性来指定盒模型的类型。例如，`...
CSS盒子模型有两种不同的解析方式：标准盒模型（W3C Box Model）和IE盒模型（IE Quirk Mode）。在标准盒模型中，元素的总宽度和高度计算公式为：内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
这种计算方式在不同浏览器间可能有所差异，有两种盒子模型：W3C标准盒模型和IE盒模型（quirks模式）。W3C标准盒模型中，元素的宽度和高度仅包含内容区域，不包括内边距和边框，而在IE盒模型中，元素的宽度和高度包含...
本文将详细介绍CSS盒子模型的基本概念、组成部分及其两种不同的表现形式：标准W3C盒子模型与IE盒子模型。 #### 二、CSS盒子模型概述 CSS盒子模型是基于矩形的概念来描述页面元素布局的。每个HTML元素都可以被视为...
了解盒子模型后，我们还需要关注盒模型的两种类型：标准盒模型（W3C Box Model）和IE盒模型（IE Box Model，又称怪异盒模型）。在标准盒模型中，元素的总宽度和高度仅由内容宽度和高度加上内边距和边框决定，而在IE...
CSS盒模型主要分为两种：标准盒模型（W3C Box Model）和IE盒模型（Internet Explorer Box Model）。这两种模型在处理元素宽度和边距时有所不同。 #### W3C盒模型： - 内容区域（Content）：实际的内容，如文字或...
在CSS中，盒子模型有两种模式：W3C标准盒模型和IE盒模型。在W3C标准盒模型中，元素的总宽度和高度等于内容的宽度和高度加上内边距和边框；而在IE盒模型（也称为怪异盒模型）中，元素的总宽度和高度只包括内容的宽度...
内容概要：本文详细讲解了 CSS 盒子模型的各项关键概念及其具体属性的...其他说明：文中还提到了有关于不同的盒模del-sizeing 如何影响布局，为读者提供了 W3C 或旧 IE 下兼容性的考虑方法和实用网址辅助理解和练习。
盒模型有两种主要类型：W3C标准盒模型和IE盒模型（或称怪异盒模型）。 1. **W3C标准盒模型**：内容区域的宽度和高度不包括内边距和边框，外边距则会影响元素与其他元素的相对位置。 2. **IE盒模型**：内容区域的...
需要注意的是，IE浏览器有一个非标准的盒子模型，其中内容区域的宽度和高度包含了内填充和边框，这导致了与W3C标准模型的差异。为了避免这种兼容性问题，通常会在HTML文档开头添加DOCTYPE声明，以确保浏览器使用标准...
在CSS3中，盒子模型有两种类型：标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。默认情况下，大多数浏览器使用W3C盒模型，其中元素的总宽度和高度由内容区域+内边距+边框决定。而IE盒模型则将边框和内边距包含在...
盒子模型有两种不同的解析方式：W3C标准盒模型和IE盒模型（也称为怪异盒模型）。在W3C标准中，元素的总宽度和高度仅包含内容区域加上边框和内边距，而外边距不影响总尺寸。但在IE盒模型中，元素的总尺寸包括内容、内...