经典：CSS使用高级技巧20则

新客网 XKER.COM 2007-09-18 来源：收藏本文

　　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 ，这就可以了。

共7页: 上一页 [1] [2] [3] [4] [5] [6] [7] 下一页

上一篇：总结:CSS在IE与Firefox下的兼容性下一篇：网页设计之CSS基础语法学习

【收藏】【评论】【推荐】【投稿】【打印】【关闭】