经典:CSS使用高级技巧20则之三

ZDNet软件频道 时间:2008-09-21 作者: | 互联网实验室 我要评论()
本文关键词:20则 技巧 CSS 软件
经典:CSS使用高级技巧20则之三

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:

#box

{

 
width: 100px;

border: 5px;

padding: 20px

}

这样调用它:


...

这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的,让它们显示效果一致。

#box

{

width: 150px

}

#box div

{

border: 5px;

padding: 20px

}

这样调用:


...

  

这样,不管什么浏览器,宽度都是150点了。


7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:

#content

{

width: 700px;

margin: 0 auto

}

你会使用

来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:

body

{

text-align: center

}

#content

{

text-align: left;

width: 700px;

margin: 0 auto

}

这会把网页内容都居中,所以在Content中又加入了text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。

CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。

20则

技巧

CSS

软件


百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134