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