- 浏览: 47167 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
浏览器模式：影响的是浏览器的版本及IE的条件注释；
文档模式下(DocType)：影响的是浏览器的兼容性(Hack)以及模式（标准模式，怪异模式）
DOCTYPE MODE
| XHML + DOCTYPE | 标准模式 |
| HTML 4.01 + strict DTD | 标准模式 |
| HTML 4.01 + URL和transitional DTD/Frameset DTD | 标准模式 |
| HTML 4.01 +只包含transitional DTD//Frameset DTD | 怪异模式 |
| DOCTYPE不存在 | 怪异模式 |
IE6第一行中有：<?xml version="1.0" encoding="utf-8"?>时，IE6:怪异模式
在IE7中，一个xml声明并不会再导致进入怪异模式，但是这并不表示在DOCTYPE之前加入其他东西也能不触发。比如html注释。
<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
标准盒模型
IE盒模型
怪异模式下，在 IE 浏览器中显示“IE盒子模型”，其他浏览器中显示“标准 W3C 盒子模型”。在标准模式下，所有浏览器都显示“标准 W3C 盒子模型”。所以为了让网页能兼容各个浏览器，让我们用标准 W3C 盒子模型 。
在Quirks(怪异模式)后IE浏览器 盒子模型计算方法是:将边框(border)和内补丁(padding)的数值归入盒模型的宽度(width)及高度(height)中,总宽和总高应该为:
盒模型的总宽度 = magin-left + width +mrgin-right
盒模型的总高度 = margin-top +height +margin-bottom
标准模式下，计算应该是:
盒模型的总宽度 = margin-left + border-left + padding-left + width +padding -rigt +border-right +margin-right
盒模型的总高度 = margin-top + border-top + padding-top + width +padding -bottom + border-bottom + margin-bottom
这里提供一个js判断 当前浏览器正在以何种方式解析 的一个 document对象
document对象有个属性compatMode ,它有两个值：
alert(document.compatMode );
BackCompat 对应 [quirks mode]怪异
CSS1Compat 对应[strict mode]严格模式/正常模式
以下内容转自：http://www.cnblogs.com/uedqd/archive/2010/12/25/1916554.html
盒模型的概念就不多说了，说说怪异模式下盒模型的问题：
怪异模式下声明的宽度和高度包含 padding和border在内。因此元素显示出来要比其他浏览器里小。
我一直认为写生先写意，从“意”的角度来讲，盒子模型在IE和其他浏览器中的差异是这个意思（注意一下画作的点睛之笔--夺命诱惑之梦露式美人痣）：
从写实的角度来见，请看具体的例子：
<div style="border:20px
solid red; padding:20px; background-color: green; width: 100px;
height:100px;">
<div style="width:100%;height:100%;
background-color:yellow;"></div>
</div>
截图对比：
可见，定义好’width’，’height’，’padding’ 还有 ’border’的元素，在IE的兼容性模式里，要比其他浏览器中小。差距还真够大的，常言道：差之毫厘，谬以千里，这何止是毫厘啊，有几公里那么多！！
这个 bug，会引起布局上的问题，导致布局混乱。严重之极。稍有正义感的江湖人士，无不欲除之而后快，但何从下手呢？常言又到，斩草须除根，所以，还须先找到其错误的根源才好。
其实，IE的盒模型bug的实质，是 ”width” 和 “height” 的作用位置的问题。
发表评论
-
iconfont font_1
2013-12-26 13:43 0http://ux.etao.com/posts/401 ... -
iconfont font
2013-12-26 13:41 0图形设计生成总结 http://www.yixieshi ... -
IE6,IE7绝对定位元素神秘消失或被遮挡的解决
2013-12-04 16:36 0IE6,IE7绝对定位元素 ... -
css float文字的显示问题（兼容性）
2013-11-22 17:55 0如果float容器未定义宽度，ff下内容会尽可能的撑 ... -
white-space:nowrap
2013-11-19 09:40 0white-space:nowrap应用 注意：f ... -
css3 target
2013-11-17 10:57 0转自：http://www.qianduan.net/cs ... -
css bugs
2013-10-24 10:36 0HR { clear: both; backgro ... -
使用CSS3的appearance属性改变元素的外观
2013-07-30 14:19 0转：http://www.w3cplus.com/css3/ ... -
css 技巧
2013-07-18 09:30 0使用background设置图片来替换文本： 每个网站都 ... -
CSS3 Word-wrap word-break white-space（待整理）
2013-06-15 22:45 0http://www.w3cplus.com/content ... -
浏览器兼容问题
2013-04-27 18:31 0兼容性： 1)浮动双边距：display:inline ... -
CSS竖直对齐vertical-align属性详解
2013-04-27 13:12 0转自：http://zhengguoting.blog. ... -
IE6 fixed min-height max-height
2013-04-08 22:03 0Fixed 1.expression 例子 ... -
ie6 bugs-2
2013-04-08 17:38 0ie6 overflow-y:auto BUG修复 h ... -
中间div滚动
2013-04-08 15:13 0<!DOCTYPE html PUBLIC &quo ... -
font-size:0对取消img的右侧和下侧margin
2013-04-04 21:21 0在做人人面试题时，发现默认情况下img并排会出现右边 ... -
工作总结
2013-02-25 13:57 0hr { width:100%; backgr ... -
IE6 BUG汇总
2013-02-24 08:48 0IE6 BUG汇总http://hi.baidu.com ... -
hasLayout
2013-02-23 17:11 0什么是hasLayout？http://ne ... -
各浏览器对常用行内替换元素的 'baseline' 位置理解不同
2013-02-17 14:44 0转自：http://www.w3help.org/ ...
相关推荐
### IE盒子模型与标准W3C盒子模型详解 #### 一、引言 在Web前端开发领域，理解和掌握CSS（层叠样式表）是至关重要的。CSS中的一个重要组成部分就是盒子模型，它对于网页布局有着不可替代的作用。在CSS中存在两种...
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍...
CSS 盒模型详解 CSS 盒模型是 HTML+CSS 中最核心的基础知识之一，它规定了网页元素如何显示以及元素间相互关系。CSS 盒模型是由 content（内容区）、padding（填充区）、border（边框区）和 margin（外边距区）四个...
总结：深刻理解盒模型是学习 div+css 的基础，是网页布局的前提。只有牢固掌握盒子模型的结构和原理，才能在网页布局中游刃有余。 因此，在学习 div+css 时，一定要重视盒子模型的学习，掌握盒子模型的组成部分、...
**CSS盒模型** 在网页设计中，CSS（层叠样式表）盒模型是理解布局的基础。它描述了HTML或XML元素如何占据空间并相互影响。盒模型由元素的内容区域、内边距（padding）、边框（border）以及外边距（margin）组成，...
【标题】：“我理解的盒模型” 在网页设计与开发中，盒模型是理解布局和样式定位的关键概念。盒模型，又称Box Model，是Web浏览器用于计算元素尺寸的一种方式，它将每个HTML元素视为一个矩形盒子，包含边距（Margin...
### CSS盒模型的应用知识介绍与基础教学 #### CSS盒模型概念 CSS盒模型（CSS Box Model）是一个核心的概念，它定义了元素如何在网页中呈现以及元素之间如何相互作用。简单来说，每个HTML元素都可以被视为一个矩形...
虽然W3C标准定义了盒子模型，但早期的IE浏览器（尤其是IE6和IE7）采用了一种不同的实现，称为“怪异盒模型”。这导致了跨浏览器的布局问题。为解决这个问题，可以使用`*{box-sizing:border-box}`进行全局设置，使...
- **IE盒模型（怪异盒模型）**：内容宽度加上边框和内填充决定元素总宽度，更符合直觉但与W3C标准不一致。 3. **CSS设置盒模型** - 使用`box-sizing`属性可以切换盒模型类型。例如，`box-sizing: border-box;`...
盒模型定义了元素的边距、边框、填充以及内容区域之间的关系，帮助开发者精确控制元素的大小和位置。本文将深入探讨HTML盒模型的概念、工作原理以及如何在实际开发中应用。 首先，我们来理解盒模型的基本组成部分：...
在CSS中，盒模型是一种描述元素布局的重要概念，它决定了元素占用空间的方式。盒模型包括元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解盒模型对于精确控制页面布局至关重要。 首先，...
**CSS盒模型详解** 在网页设计中，CSS（Cascading Style Sheets）盒模型是理解元素布局的关键。盒模型描述了HTML或CSS元素如何占据空间并与其他元素交互。这个概念对于精确控制页面布局至关重要，特别是在响应式...
- **盒模型在流体布局中的应用**：通过调整元素的盒子模型属性，我们可以实现响应式设计，使页面在不同屏幕尺寸下仍能保持良好的布局。 - **盒模型与浮动元素**：在使用float属性时，盒子模型可以帮助我们控制元素间...
在CSS3中，还引入了盒模型的两种模式：W3C标准盒模型和IE盒模型（也称为怪异盒模型）。W3C标准盒模型中，元素的width和height只包括内容区，而IE盒模型则包括内容区、内边距和边框。为了避免浏览器之间的兼容性问题...
5. **盒模型转换**：使用`box-sizing`属性将元素的盒模型从默认的`content-box`改为`border-box`，观察元素尺寸的计算方式变化。 在练习过程中，你还可以结合HTML5的新特性，如`<section>`、`<article>`等语义化...
CSS盒模型是网页布局的基础，它定义了网页元素如何占据空间和相互影响。在CSS中，每个元素都被视为一个矩形框，这个框由四个部分组成：内容(content)、内填充(padding)、边框(border)和外边界(margin)。 1. 内容...
在这个"伸缩盒模型网页（HTML+CSS）"压缩包中，包含了一个实际的网页示例，用于演示和学习Flex布局的应用。以下是关于Flex布局的详细介绍： 1. **Flex容器与Flex项目**：在Flex布局中，容器是使用`display: flex`或...
记忆：可以联想现实中的包装盒。 四、盒子模型的应用 盒子模型的应用非常广泛，在网页布局、样式设计等方面都有重要作用。 1. 设置边框（border）： *边框的样式可以通过border-style来设置。 *边框的宽度可以...
总的来说，这个资源包为开发者提供了一个丰富的起点，包括了可用于角色交互的弓箭模型和用于场景构建的多类型盒子模型。通过利用这些标准资源，开发者能够专注于游戏逻辑和交互设计，而不是花费大量时间在基础素材的...
这是一个CSS的PPT CSS 盒模型，主要介绍CSS中的盒模型