盒模型：
在IE5.5和IE6的quirks Model下：
width = 内容长度+padding+border
在w3c的标准模式下：
width = 内容长度
因此，如果涉及如下代码：
<style type="text/css">
*{margin:0px;
padding:0px;}
#out{
width:100px;
margin:20px;
padding:20px;
border:10px #666 solid;
background-color:red;
}
#inner{
background-color:blue;
}
</style>
</head>
<body>
<div id ="out">
<div id ="inner">wo shi nei rong</div>
</div>
</body>
在IE5.5和IE6的quirks Model下out总的宽度是：
20 +100+ 20 =140px
在w3c下总的宽度是：
20+10+20+100+20+10+20 =200px
关于float
一旦某个html元素被标记为float，他就会变成块元素，浮在原来所在的位置上（类似于到了一个Z轴更高的层，覆盖在原来的层上），即他的坐标左上方不变（所以它之前的元素不受影响），它后面的元素会认为他不存在，也就是自动的去填充他的位置（除非后面的元素也是float，这样就和他在一个层）。
如果后面的元素不希望受到float的印象，可以用
clean:both;清除前面元素的左右浮动
clean:right;清除前面元素右浮动
clean:left;清除前面元素左浮动
这样元素就不会收到浮动的影响了
关于quirks Model
IE6如果不加上<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
就会进入Quirks Model
分享到：
相关推荐
### 常见DIV+CSS问题集合与解决 #### 一、DIV+CSS基础概念 - **DIV**：是HTML中的一个容器元素，通常用于结构化文档或对文档的某部分进行分组。 - **CSS**：层叠样式表（Cascading Style Sheets），是一种用来表现...
本文将针对"Sui-Mobile路由加载js,css问题的解决方案"进行详细的探讨。 首先，理解SUI Mobile的路由机制是解决问题的关键。SUI Mobile 并不是一个完整的前端框架，它不包含内置的路由管理功能。通常，开发者会结合...
在您提到的问题中，“DivCss问题”显然与HTML中的div元素和相关的CSS样式有关，特别是涉及到内容增多时的排版问题。当新闻内容增加一倍时，超出显示区域，这通常是因为容器的大小没有正确地适应内容的变化，或者溢出...
书中所传授的，是Lea Verou独特的分析方法，应用这些方法，开发者可以面对几乎所有的CSS问题，找到干练、可维护、灵活、轻量级并且符合标准的解决方案。Lea Verou在超过60个国际网页开发会议上的热门讲座就是这本书...
作者详细讨论了如何优化布局、处理浮动、实现复杂的定位策略，以及如何避免和解决常见的CSS问题。这本书还介绍了CSS预处理器（如Sass和Less）的概念，使开发者能够编写更模块化、可维护的CSS代码。此外，书中涵盖的...
文件“web标准常见问题集合(CSS).doc”很可能是一个详细的文档，涵盖了常见的CSS问题，例如： 1. 选择器优先级：如何理解并正确使用继承、内联样式、内部样式表和外部样式表之间的优先级。 2. 布局问题：如何实现...
6. **CSS第6天案例和笔记**：最后一天的资料可能涉及CSS优化和性能提升，如何减少CSS的加载时间，以及如何调试和修复CSS问题。案例可能包括实际项目中的应用实例。 综上所述，这个“CSSDemo资源文件CSS”是一个系统...
140个CSS问题和答案的列表。 阅读MDN CSS文档时撰写。 本地存储状态 允许多实例，多选项卡/浏览器共享和持久状态，因此您可以跟踪已经回答的问题。 例子 邻近因素对特异性有影响吗？ 例如，“ main div”比“ ...
在前端开发过程中，我们经常会遇到各种各样的 CSS 问题，这些问题有时候会给项目的进度带来不小的麻烦。本文将重点介绍几种常见的 CSS BUG 以及它们的处理方法，帮助开发者们更好地定位和解决问题。 #### 1. IE6 ...
通过使用这些工具，开发者可以提高工作效率，避免因CSS问题导致的调试时间浪费。 常见的CSS检查工具有： 1. **浏览器开发者工具**：大多数现代浏览器（如Chrome、Firefox、Safari等）内置了开发者工具，其中包含...
【CSS学习经典教程】是一份专为初学者和有一定基础的学习者设计的教程，旨在帮助他们深入理解并熟练掌握CSS（层叠样式表...通过实践教程中的案例，你将能够解决实际工作中遇到的大部分CSS问题，提升你的网页设计水平。
这款工具的核心设计理念是简洁易用，旨在为开发者提供一个快速定位和修复CSS问题的平台。在1.0版本中，开发者可以期待以下主要功能： 1. **实时预览**：工具提供即时的代码编辑与页面预览功能，让开发者能够在修改...
- **调试工具**：介绍了开发者工具的使用，帮助读者更高效地调试和定位CSS问题。 5. **实战项目** - **完整网站样例**：可能包含一个或多个完整的网站样式代码，让读者能在实际项目中应用所学知识。 通过下载并...
这里，我们将深入探讨一些常见的CSS问题及其解决方案，帮助你更好地理解和掌握这个强大的样式语言。 一、选择器的优先级 CSS选择器的优先级是根据其特异性（specificity）来确定的。ID选择器具有最高优先级，接下来...
- **调试和优化**：开发者在遇到布局问题时，可以利用编辑器快速定位和修复CSS问题。 - **协作**：团队成员可以共享编辑器链接，共同编辑同一份CSS，提高协作效率。 ### 实战应用 - **Flexbox和Grid布局**：使用...
CSS 面试题总结 从给定的文件中，我们可以看到，主要涵盖了 CSS 相关的知识点，包括 CSS 选择器、浮动布局、盒子模型等。下面是从文件中提炼出的知识点： 1. CSS 选择器 CSS 选择器是一种模式，用于选择需要添加...
CSS Hack 是一种在 CSS 中使用特殊的 syntax 来解决不同浏览器之间的兼容性问题。常见的 CSS Hack 方法有条件 Hack、属性 Hack 和选择符 Hack。 PX、REM、EM 的区别 PX、REM 和 EM 都是 CSS 中的长度单位，但它们...
这对于学习、测试新特性或调试CSS问题非常有用。 5.2 沙盒的优势 - 隔离：不影响其他CSS代码或网页。 - 快速预览：即时查看样式更改效果。 - 学习工具：初学者可以尝试各种CSS语法，观察效果。 总结，CssDesk作为...
- **CSS Linting**：使用工具检测并修复潜在的CSS问题。 - **模块化与组件化**：将CSS拆分为独立模块，便于维护和复用。 综上所述，Core CSS 作为一本教程，涵盖了CSS从基础到高级的各个方面，适合希望深入学习和...
这可能是一本关于CSS实用技巧和解决方案的参考手册，通常包含了各种场景下的CSS问题解决方法，覆盖了布局、响应式设计、动画等方面。 3. **CSS2.0_DOC.chm**、**Cascading Style Sheet 2.0 中文手册.chm**： 这两...