div+css布局无法避免的冗余标签
2008-09-11 10:41
381 查看
http://asp.snowstop.net/blog/?id=227&date=2007-11
div+css布局无法避免的冗余标签 完全严格按照w3c的标准来布局是不可能的,想要在不同版本的浏览器下都表现出漂亮的网页,几乎无可避免地要使用一些多余的标签。
总结而言,div布局必须用到冗余标签的地方主要有三个:
一是背景图和背景色,当内层元素的css属性全部为“float:left”时,外层的背景将在mozilla等浏览器下无法显示。这个时候必须要在内外层之间嵌套一个背景层,或是在内层元素最后增加一个“clear:both”的空标签。
二是当页宽为绝对值时,必须在属性为float的并列元素外嵌套一个宽度为绝对值之和的div,以保证页面放缩时float元素不会“掉下去”。
三是当需要写底部信息栏时,因不能用position:absolute定位,而必须在所有float的并列元素之外嵌套一个div,以保证高度自动伸缩。同时底部信息栏应具有“clear:both”属性。
我最后的解决方法是,在最后加个<div class="clear"></div>
然后定义.clear{ clear:both;height:0px;}
就可以了。
虽然不喜欢冗余标签,但是没有办法的情况下也必须使用...
div+css布局无法避免的冗余标签 完全严格按照w3c的标准来布局是不可能的,想要在不同版本的浏览器下都表现出漂亮的网页,几乎无可避免地要使用一些多余的标签。
总结而言,div布局必须用到冗余标签的地方主要有三个:
一是背景图和背景色,当内层元素的css属性全部为“float:left”时,外层的背景将在mozilla等浏览器下无法显示。这个时候必须要在内外层之间嵌套一个背景层,或是在内层元素最后增加一个“clear:both”的空标签。
二是当页宽为绝对值时,必须在属性为float的并列元素外嵌套一个宽度为绝对值之和的div,以保证页面放缩时float元素不会“掉下去”。
三是当需要写底部信息栏时,因不能用position:absolute定位,而必须在所有float的并列元素之外嵌套一个div,以保证高度自动伸缩。同时底部信息栏应具有“clear:both”属性。
我最后的解决方法是,在最后加个<div class="clear"></div>
然后定义.clear{ clear:both;height:0px;}
就可以了。
虽然不喜欢冗余标签,但是没有办法的情况下也必须使用...
相关文章推荐
- Html-Css-div标签嵌套浮动div标签时无法撑开外部div的解决
- div+css布局中选择使用html标签的方法
- 经验之谈 CSS网页布局避免滥用DIV元素
- DIV+CSS布局问题,让两个DIV标签并排
- Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
- DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
- DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
- activex布局iframe+div+css,activex无法显示的问题。
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
- 一个很美观的标签云效果,纯DIV+CSS布局
- DIV+CSS布局重新学习之使用A标签和CSS制作按钮
- CSS 网页布局应该避免滥用div元素
- 精通 CSS+DIV 网页样式与布局 2 Selector -- 选择符
- 精通 CSS+DIV 网页样式与布局 16
- div+css网页布局(sina)
- html+div+css布局入门
- <转载>Div+Css布局教程(-)CSS必备知识
- HTML结构化:实践DIV+CSS网页布局入门指南
- 精通CSS.DIV网页样式与布局(二)—— 段落
- 精通 CSS+DIV 网页样式与布局 26