标题:
CSS布局高级技巧
[打印本页]
作者:
飞翔的蜗牛
时间:
2011-12-9 10:36
标题:
CSS布局高级技巧
CSS
布局高级技巧
margin
和
padding
总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:
IE 6.0 Firefox Opera
等是
QUOTE:
真实宽度
=width+padding+border+margin
IE5.X
QUOTE:
真实宽度
=width-padding-border-margin
很明显,第一种下很完美的布局在第二种情况下后果是很凄惨的!
解决的方法是
hack
QUOTE:
div.content {
width:400px; //
这个是错误的
width
,所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win
忽略了
"\"}\""
后的内容
voice-family:inherit;
width:300px; //
包括
IE6/win
在内的部分浏览器读到这句,新的数值
(300px)
覆盖掉了旧的
}
html>body .content { //html>body
是
CSS2
的写法
width:300px; //
支持
CSS2
该写法的浏览器
(
非
IE5)
有幸读到了这一句
}
div.content {
width:300px !important; //
这个是正确的
width
,大部分支持
!important
标记的浏览器使用这里的数值
width(
空格
)/**/:400px; //IE6/win
不解析这句,所以
IE6/win
仍然认为
width
的值是
300px
;而
IE5.X/win
读到这句,新的数值
(400px)
覆盖掉了旧的,因为
!important
标记对他们不起作用
}
html>body .content { //html>body
是
CSS2
的写法
width:300px; //
支持
CSS2
该写法的浏览器有幸读到了这一句
}
具体解释点击下面链接查看
www.blueidea.com/tech/site/2006/3170.asp
www.jluvip.com/blog/article.asp?id=114
列等高技巧
n
行
n
列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,做法有:背景图填充、加
JS
脚本的
方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。
背景图填充法:
xhtml:
QUOTE:
<div id="wrap">
<div id="column1">
这是第一列
</div>
<div id="column1">
这是第二列
</div>
<div class="clear"></div>
</div>
css:
QUOTE:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
就是将一个
npx
宽的一张图片在外部容器纵向重复,定位到两列交错的位置纵向重复,在视觉上产生了两列高度一样的错觉
欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/)
Powered by Discuz! 6.1.0