CSS经典技巧20条总结(2)

五、图片替换技巧 一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。 比如你想整个卖东西的图标，你就用了这个图片： <h1><img src="widget-image.gif" alt="Buy widgets" /></h1> 这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的： <h1>Buy widgets</h1> 但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS： h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px } 注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

六、CSS box模型的另一种调整技巧 这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如： #box { width: 100px; border: 5px; padding: 20px } 这样调用它： <div id="box">...</div> 这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。 但用CSS也可以达到同样的目的，让它们显示效果一致。 #box { width: 150px } #box div { border: 5px; padding: 20px } 这样调用： <div id="box"><div>...</div></div> 这样，不管什么浏览器，宽度都是150点了。

七、块元素居中对齐 如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样： #content { width: 700px; margin: 0 auto } 你会使用 <div id="content"> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下： body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto } 这会把网页内容都居中，所以在Content中又加入了 text-align: left 。