很(hěn)多(duō)網站(zhàn)建設高(gāo)手都知使用css縮寫,因為(wèi)使用縮寫可(kě)以幫助減少(shǎo)你(nǐ)CSS文件的大(dà)小(xiǎo),更加容易閱讀。這裏就着重總結了一些(xiē)css常用技(jì)巧,為(wèi)網站(zhàn)重構打下基礎。
1. Block和(hé)inline元素對比
所有(yǒu)的HTML元素都屬于block和(hé)inline之一。
block元素的特點是:
總是在新行(xíng)上(shàng)開(kāi)始;
高(gāo)度,行(xíng)高(gāo)以及頂和(hé)底邊距都可(kě)控制(zhì);
寬度缺省是它的容器(qì)的100%,除非設定一個(gè)度 和(hé)
是塊元素的例子。
相反地,inline元素的特點是:
和(hé)其他元素都在一行(xíng)上(shàng);
高(gāo),行(xíng)高(gāo)及頂和(hé)底邊距不可(kě)改變;
寬度就是它的文字或圖片的寬度,不可(kě)改變。
, 和(hé)是inline元素的例子。
用display: inline 或display: block命令就可(kě)以改變一個(gè)元素的這一特性。什麽時(shí)候需要改變這一屬性呢?
讓一個(gè)inline元素從新行(xíng)開(kāi)始;
讓塊元素和(hé)其他元素保持在一行(xíng)上(shàng);
控制(zhì)inline元素的寬度(對導航條非凡有(yǒu)用);
控制(zhì)inline元素的高(gāo)度;
無須設定寬度即可(kě)為(wèi)一個(gè)塊元素設定與文字同寬的背景色。
2. 再來(lái)一個(gè)box黑(hēi)客方法
之所以有(yǒu)這麽多(duō)box黑(hēi)客方法,是因為(wèi)IE在6之前對box的理(lǐ)解跟别人(rén)都不一樣,它的寬度要包含邊線寬和(hé)空(kōng)白。要想讓IE5等同其他浏覽器(qì)保持一緻,可(kě)以用CSS的方法:
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
第一個(gè)寬度所有(yǒu)浏覽器(qì)都認得(de),但(dàn)IE5.x不認得(de)第2行(xíng)的寬度設置,隻因為(wèi)那(nà)一行(xíng)上(shàng)有(yǒu)空(kōng)白的注釋符号(多(duō)麽蠢的語法分析!),所以IE5.x就用20減掉一些(xiē)空(kōng)白,而其他浏覽器(qì)會(huì)用14這個(gè)寬度,因為(wèi)它是第2行(xíng),會(huì)覆蓋掉第1行(xíng)。
3. 頁面的最小(xiǎo)寬度
min-width是個(gè)非常方便的CSS命令,它可(kě)以指定元素最小(xiǎo)也不能小(xiǎo)于某個(gè)寬度,這樣就能保證排版一直正确。但(dàn)IE不認得(de)這個(gè),而它實際上(shàng)把width當做(zuò)最小(xiǎo)寬度來(lái)使。為(wèi)了讓這一命令在IE上(shàng)也能用,可(kě)以把一個(gè)
放到 标簽下,然後為(wèi)div指定一個(gè)類:
然後CSS這樣設計(jì):
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
第一個(gè)min-width是正常的;但(dàn)第2行(xíng)的width使用了Javascript,這隻有(yǒu)IE才認得(de),這也會(huì)讓你(nǐ)的HTML文檔不太正規。它實際上(shàng)通(tōng)過Javascript的判定來(lái)實現最小(xiǎo)寬度。
同樣的辦法也可(kě)以為(wèi)IE實現最大(dà)寬度:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
}
4. IE與寬度和(hé)高(gāo)度的問題
IE不認得(de)min-這個(gè)定義,但(dàn)實際上(shàng)它把正常的width和(hé)height當作(zuò)有(yǒu)min的情況來(lái)使。這樣問題就大(dà)了,假如隻用寬度和(hé)高(gāo)度,正常的浏覽器(qì)裏這兩個(gè)值就不會(huì)變,假如隻用min-width和(hé)min-height的話(huà),IE下面根本等于沒有(yǒu)設置寬度和(hé)高(gāo)度。
5. 區(qū)分大(dà)小(xiǎo)寫
當在XHTML中使用CSS,CSS裏定義的元素名稱是區(qū)分大(dà)小(xiǎo)寫的。為(wèi)了避免這種錯誤,我建議所有(yǒu)的定義名稱都采用小(xiǎo)寫。
class和(hé)id的值在HTML和(hé)XHTML中也是區(qū)分大(dà)小(xiǎo)寫的,如果你(nǐ)一定要大(dà)小(xiǎo)寫混合寫,請(qǐng)仔細确認你(nǐ)在CSS的定義和(hé)XHTML裏的标簽是一緻的。
6. 取消class和(hé)id前的元素限定
當你(nǐ)寫給一個(gè)元素定義class或者id,你(nǐ)可(kě)以省略前面的元素限定,因為(wèi)ID在一個(gè)頁面裏是唯一的,clas s可(kě)以在頁面中多(duō)次使用。你(nǐ)限定某個(gè)元素毫無意義。