先看下面这个图，这是FireBug下看到的某个标签(Div)的布局图，前端工程师一定不陌生吧。
对于div布局，该图对应的属性为：
border：边框
padding:内边距(也称之为”内胆”)
marging:外边距
width:宽
height:高
position:位置
z-index:z(zoom)
其它的标签，可以以此内推，称之为CSS+Div布局的”盒子模型”。
对于FF：一个Div的width值=实际的宽度值+padding值+border值。
而IE6: Div的width值有时是不包括border值的，所以很容易产生页面布局的混乱，所以这是造成要做页面浏览器兼容测试一个原因。
Position为页面元素的定位方式，z-index为页面元素的显示层次值。
对于不同浏览器下，页面的显示会有不同的问题，所以有了针对浏览器兼容性的CSS hack技术，即：
IE6，IE7，IE8能识别*，FF不能识别*
IE6能识别*，不能识别 !important
IE7能识别*，也能识别!important
FF不能识别*，但能识别!important
例：
IE6，IE7 识别*width：10px，FF识别width：10px
当然，IE6，IE7也是识别width：10px的。
IE7，FF识别 width：10px !important，但IE6是不识别的。
另外IE6对下划线“_”也是能识别的，但IE7和FF是不识别的。
所以，在书写CSS时，带“*，!important”和不带符号的属性的书写顺序是有技巧的^_^。
附CSS浏览器兼容表： http://www.div-css.com/f/info/css-hack-list.gif
- 大小: 12.9 KB
分享到：
相关推荐
而在CSS布局中，有一个核心概念——盒子模型（Box Model），它是构成网页布局的基础。本文将通过详细的图解和文字说明，帮助初学者全面理解盒子模型的基本概念及其应用。 #### 二、什么是盒子模型？ 每个HTML元素...
首先，弹性盒子模型的主要目标是解决传统CSS布局（如块级元素和行内元素）在处理复杂多变的网页布局时遇到的困难。通过Flexbox，我们可以更容易地创建响应式设计，使内容适应不同屏幕尺寸和设备。 1. **容器属性**...
5. **盒子模型**: 盒子模型是CSS布局的基础，每个HTML元素都可以看作一个矩形盒子，包含内容、内边距、边框和外边距，理解这一模型对于精确布局至关重要。 6. **块状元素与内联元素**: 块状元素如`div`占据整行，...
然而，IE6在某些情况下采用了不同的盒子模型，这导致了与遵循W3C标准的其他浏览器（如Firefox）的显示差异。 首先，我们来看IE6在标准模式下的盒子模型。当声明文档类型（DOCTYPE）为XHTML 1.0 Transitional或更...
本文主要聚焦于CSS的跨浏览器兼容性，特别是CSS盒子模型、块级和内联元素的区别，以及浮动和清除属性的应用。 首先，理解CSS盒子模型是实现跨浏览器兼容性的基础。盒子模型描述了元素占用空间的方式，包括元素的...
8. 第八课：CSS Hack针对不同浏览器的兼容性问题，使用特定的CSS语法进行修复。 【小技巧】 1. 单张图片按钮实例：通过CSS对图片应用样式，实现可点击的按钮效果。 2. 首行文字两文字缩进：使用CSS文本属性控制文本...
CSS盒子模型包括内容(content)、填充(padding)、边框(border)和边界(margin)四部分，它决定了元素在页面上的占用空间、边界距离以及与其他元素的关系。虽然大多数浏览器都支持这一模型，但在IE6中存在一些特殊性，...
css CSS定义如何显示HTML元素，全称:Cascading Style ...盒子模型概述 盒子模型:padding 盒子模型:border 盒子模型:margin CSS布局:float CSS布局:position CSS布局方式 CSS列表(list) CSS表格(table) CSS hack 参考：
这一误区源于国内对这项技术理解不够深入，最初的传播者仅从代码层面上将过去的Table布局与现在的DIV布局进行比较，得出了DIV+CSS这一命名，而忽视了背后的深层次技术标准。这导致很多网页开发者误以为仅使用DIV进行...
CSS2的盒模型是理解布局的关键，它将每个元素视为包含内容、内边距（padding）、边框（border）和外边距（margin）的矩形盒子。盒模型的不同处理方式（如IE的怪异盒模型和W3C标准盒模型）可能会导致布局差异，需要...
《精通CSS高级Web标准解决方案》是一本专注于深入理解与应用CSS技术的专业书籍，结合书签功能，便于读者高效查阅和学习。CSS（层叠样式表）是构建网页外观和布局的关键技术，它允许开发者分离内容与表现，实现网页的...
最后，“CSS定位和布局”章节深入讲解了CSS布局模型，包括盒模型、浮动、定位、网格和弹性盒子等。这些技术是实现复杂页面布局的关键，也是现代网页设计的核心。 此外，本书还提供了大量实用的CSS技巧、窍门和代码...
- 在处理盒子模型（Box Model）时，需要注意IE5和IE6之间存在的差异，可以通过特定的Hack方法来解决。 通过上述内容，我们可以看到，CSS兼容性的处理涉及到多个方面，包括但不限于选择器、属性声明、布局管理等。...
由于不同浏览器对CSS的支持程度存在差异，开发者需要通过各种手段（如CSS Hack）来解决这些问题。在规划CSS时，要考虑到不同浏览器的兼容性问题，使用更标准的写法并测试在各个主流浏览器中的显示效果。 CSS3引入了...
- **学习目标**: 理解盒子模型的基本概念，熟悉块状元素与内联元素的区别，掌握CSS选择器的使用方法。 ##### 第二课: 浮动 - **概念**: 浮动使元素脱离文档流，可实现左右排列布局。 - **应用场景**: 常用于创建侧...
2. **盒模型**：在CSS中，每个元素都可看作一个盒子，包含内容区、内边距、边框和外边距。理解盒模型对于精确布局至关重要，文件009、095等可能展示了不同盒模型的应用。 3. **选择器与属性**：CSS选择器用于定位...
1. **盒模型**：理解CSS的盒模型是进行`div+css`布局的基础。盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。每个`div`元素都可以看作是一个矩形盒子，这些属性影响着元素的大小和位置。...