最近一个朋友突然问起我盒模型的问题，和我起了分歧，说和XX书上写的不一样，我很奇怪试试就知道的东西，为什么就不愿相信事实呢。真是尽信书不如无书。
document有个属性compatMode，BackCompat（对应quirks mode），CSS1Compat（对应strict mode）。如果你头部不写doctype声明的话，一般默认为BackCompat。Presto内核（Opera）的浏览器我没有测试，哪位同学有空可以实验下。Gecko和Webkit内核的浏览器这2个模式是一致的。这就剩下老大难Trident同学了。
下面是我的理解，不负责任
Trident内核：
BackCompat下，width=内容宽度+border宽度+padding宽度
CSS1Compat下，width=内容宽度
不管哪个模式下，width也没有算margin的宽度。
我个人的经验是，给element设置width、height了，就不要指定他的border和padding了，反之亦然。
- t1.rar (304 Bytes)
- 描述: 测试页面
- 下载次数: 1
分享到：
相关推荐
盒子模型的应用包括调整网页中的对齐方式、理解盒子的各个属性、理解空格的影响、理解 body 标记的 margin 属性、如何利用 CSS 控制页面特定的元素。 5. 盒子之间的关系 盒子之间的关系包括 HTML 与 DOM、标准文档...
### IE盒子模型与标准W3C盒子模型详解 #### 一、引言 在Web前端开发领域，理解和掌握CSS（层叠样式表...通过本文的介绍，相信您已经对IE盒子模型与标准W3C盒子模型有了更深入的理解，这对于提高Web开发技能至关重要。
总结：深刻理解盒模型是学习 div+css 的基础，是网页布局的前提。只有牢固掌握盒子模型的结构和原理，才能在网页布局中游刃有余。 因此，在学习 div+css 时，一定要重视盒子模型的学习，掌握盒子模型的组成部分、...
首先，我们来理解盒模型的基本组成部分： 1. 内容（Content）：这是盒模型的核心，包含元素的实际文本或图像等数据。 2. 填充（Padding）：内容与边框之间的区域，可以用来增加元素内部的空间，使其看起来不那么...
在网页设计中，CSS（层叠样式表）盒模型是理解布局的基础。它描述了HTML或XML元素如何占据空间并相互影响。盒模型由元素的内容区域、内边距（padding）、边框（border）以及外边距（margin）组成，形成了一个矩形的...
在网页设计中，CSS（Cascading Style Sheets）盒模型是理解元素布局的关键。盒模型描述了HTML或CSS元素如何占据空间并与其他元素交互。这个概念对于精确控制页面布局至关重要，特别是在响应式设计和跨浏览器一致性...
虽然W3C标准定义了盒子模型，但早期的IE浏览器（尤其是IE6和IE7）采用了一种不同的实现，称为“怪异盒模型”。这导致了跨浏览器的布局问题。为解决这个问题，可以使用`*{box-sizing:border-box}`进行全局设置，使...
- **IE盒模型（怪异盒模型）**：内容宽度加上边框和内填充决定元素总宽度，更符合直觉但与W3C标准不一致。 3. **CSS设置盒模型** - 使用`box-sizing`属性可以切换盒模型类型。例如，`box-sizing: border-box;`...
在网页设计与开发中，CSS（层叠样式表）盒模型是理解元素布局和尺寸计算的关键概念。盒模型定义了元素如何占据空间，包括内容区域、内边距、边框和外边距。了解CSS盒模型对于优化页面布局和解决样式问题至关重要。 ...
- **盒模型在流体布局中的应用**：通过调整元素的盒子模型属性，我们可以实现响应式设计，使页面在不同屏幕尺寸下仍能保持良好的布局。 - **盒模型与浮动元素**：在使用float属性时，盒子模型可以帮助我们控制元素间...
### CSS盒模型的应用知识介绍与基础教学 #### CSS盒模型概念 CSS盒模型（CSS Box Model）是一个核心的概念，它定义了元素如何在...深入理解和灵活运用盒模型的相关属性，能够帮助开发者构建出既美观又功能强大的网页。
在CSS3中，还引入了盒模型的两种模式：W3C标准盒模型和IE盒模型（也称为怪异盒模型）。W3C标准盒模型中，元素的width和height只包括内容区，而IE盒模型则包括内容区、内边距和边框。为了避免浏览器之间的兼容性问题...
理解盒模型对于精确控制页面布局至关重要。 首先，让我们详细讨论内边距(padding)。内边距是在元素的内容和边框之间添加的空间，可以用来增加元素内部的间距，使其内容与边框保持一定的距离。在CSS中，我们可以通过...
这是盒子模型的思维导图，便于理解CSS这一核心，通过思维导图我们可以成体系的理解盒子模型，便于学习和记忆
CSS盒子模型有两种类型：W3C标准盒子模型和IE盒子模型（也称为怪异盒模型）。在标准模型中，元素的总宽度和高度等于内容区域加上内边距和边框；而在IE模型中，总尺寸仅包含内容区域，内边距和边框被加到了总宽度和...
5. **盒模型转换**：使用`box-sizing`属性将元素的盒模型从默认的`content-box`改为`border-box`，观察元素尺寸的计算方式变化。 在练习过程中，你还可以结合HTML5的新特性，如`<section>`、`<article>`等语义化...
通过本文的学习，我们了解了盒子模型的基本概念及其组成部分，并探讨了不同类型的盒子模型以及如何解决盒模型带来的兼容性问题。理解和掌握盒子模型对于学习CSS布局至关重要，希望本文能够帮助大家打下坚实的基础。
在网页设计中，CSS盒模型是理解网页布局的基础。这个模型描述了网页元素如何占用空间并与其他元素交互。盒模型包括四个关键部分：内容（content）、内填充（padding）、边框（border）和外边距（margin）。理解这些...
理解盒模型的关键在于宽度和高度的计算。如果没有设置`width`和`height`，边框和内填充会挤占内容区域。如果设置了`width`，边框和内填充将附加在设置的宽度之外；同样，无论是否设置`height`，边框、内填充和外边界...