先看下面这个图,这是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选择器 【第二课】浮动 【第三课】清除浮动 【第四课】导航条 【第五课】浮动...
css CSS定义如何显示HTML元素,全称:Cascading Style ...盒子模型概述 盒子模型:padding 盒子模型:border 盒子模型:margin CSS布局:float CSS布局:position CSS布局方式 CSS列表(list) CSS表格(table) CSS hack 参考:
HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、...
HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、...
前端面试笔记总结,html ,css ,html5 ,css3 ,js,vue基础的面试题,HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 其他 HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox JavaScript: 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、...
传统的布局方式一般都是基于 div 盒子模型,利用 float, position, display 来进行布局。 每个前端开发者对这些布局方式都非常熟悉。对一些特殊的布局来说,使用这些属性并不方便,由此还衍生出各种 hack 方案...
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化...
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化...