|
6. CSS box模型的另一種調(diào)整技巧
這個Box模型的調(diào)整主要是針對IE6之前的IE瀏覽器的，它們把邊界寬度和空白都算在元素寬度上。比如：
#box { width: 100px; border: 5px; padding: 20px }
這樣調(diào)用它：
<div id="box">...</div>
這時盒子的全寬應(yīng)該是150點(diǎn)，這在除IE6之前的IE瀏覽器之外的所有瀏覽器上都是正確的。但在IE5這樣的瀏覽器上，它的全寬仍是100點(diǎn)。可以用以前人發(fā)明的Box調(diào)整方法來處理這種差異。
但用CSS也可以達(dá)到同樣的目的，讓它們顯示效果一致。
#box { width: 150px } #box div { border: 5px; padding: 20px }
這樣調(diào)用：
<div id="box"><div>...</div></div>
這樣，不管什么瀏覽器，寬度都是150點(diǎn)了。
7. 塊元素居中對齊
如果想做個固定寬度的網(wǎng)頁并且想讓網(wǎng)頁水平居中的話，通常是這樣：
#content { width: 700px; margin: 0 auto }
你會使用 <div id="content"> 來圍上所有元素。這很簡單，但不夠好，IE6之前版本會顯示不出這種效果。改CSS如下：
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
這會把網(wǎng)頁內(nèi)容都居中，所以在Content中又加入了:text-align: left 。
8. 用CSS來處理垂直對齊
垂直對齊用表格可以很方便地實(shí)現(xiàn)，設(shè)定表格單元 vertical-align: middle 就可以了。但對CSS來說這沒用。如果你想設(shè)定一個導(dǎo)航條是2em高，而想讓導(dǎo)航文字垂直居中的話，設(shè)定這個屬性是沒用的。
CSS方法是什么呢？對了，把這些文字的行高設(shè)為 2em：line-height: 2em ，這就可以了。
9. CSS在容器內(nèi)定位
CSS的一個好處是可以把一個元素任意定位，在一個容器內(nèi)也可以。比如對這個容器：
#container { position: relative }
這樣容器內(nèi)所有的元素都會相對定位，可以這樣用：
<div id="container"><div id="navigation">...</div></div>
如果想定位到距左30點(diǎn)，距上5點(diǎn)，可以這樣：
#navigation { position: absolute; left: 30px; top: 5px }
當(dāng)然，你還可以這樣：
margin: 5px 0 0 30px
注意4個數(shù)字的順序是：上、右、下、左。當(dāng)然，有時候定位的方法而不是邊距的方法更好些。
10. 直通到屏幕底部的背景色
在垂直方向是進(jìn)行控制是CSS所不能的。如果你想讓導(dǎo)航欄和內(nèi)容欄一樣直通到頁面底部，用表格是很方便的，但如果只用這樣的CSS：
#navigation { background: blue; width: 150px }
較短的導(dǎo)航條是不會直通到底部的，半路內(nèi)容結(jié)束時它就結(jié)束了。該怎么辦呢？
不幸的是，只能采用欺騙的手段了，給這較短的一欄加上個背景圖，寬度和欄寬一樣，并讓它的顏色和設(shè)定的背景色一樣。
body { background: url(blue-image.gif) 0 0 repeat-y }
此時不能用em做單位，因?yàn)槟菢拥脑�，一旦讀者改變了字體大小，這個花招就會露餡，只能使用px。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 CSS經(jīng)典技巧十則 [1] 下一頁
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論
|
第 1 頁 
第 2 頁 CSS經(jīng)典技巧十則 [2]
