CSS常用(yòng)技巧分(fēn)析

　　很多(duō)網站建設高(gāo)手都知使用(yòng)css縮寫，因爲使用(yòng)縮寫可(kě)以幫助減少你CSS文件的(de)大(dà)小，更加容易閱讀。這(zhè)裏就著(zhe)重總結了(le)一些css常用(yòng)技巧，爲網站重構打下(xià)基礎。

　　1. Block和(hé)inline元素對(duì)比

　　所有的(de)HTML元素都屬于block和(hé)inline之一。

　　block元素的(de)特點是：

　　總是在新行上開始;

　　高(gāo)度，行高(gāo)以及頂和(hé)底邊距都可(kě)控制;

　　寬度缺省是它的(de)容器的(de)100%，除非設定一個(gè)度 和(hé)

　　是塊元素的(de)例子。

　　相反地，inline元素的(de)特點是：

　　和(hé)其他(tā)元素都在一行上;

　　高(gāo)，行高(gāo)及頂和(hé)底邊距不可(kě)改變;

　　寬度就是它的(de)文字或圖片的(de)寬度，不可(kě)改變。

　　, 和(hé)是inline元素的(de)例子。

　　用(yòng)display: inline 或display: block命令就可(kě)以改變一個(gè)元素的(de)這(zhè)一特性。什(shén)麽時(shí)候需要改變這(zhè)一屬性呢(ne)?

　　讓一個(gè)inline元素從新行開始;

　　讓塊元素和(hé)其他(tā)元素保持在一行上;

　　控制inline元素的(de)寬度(對(duì)導航條非凡有用(yòng));

　　控制inline元素的(de)高(gāo)度;

　　無須設定寬度即可(kě)爲一個(gè)塊元素設定與文字同寬的(de)背景色。

　　2. 再來(lái)一個(gè)box黑(hēi)客方法

　　之所以有這(zhè)麽多(duō)box黑(hēi)客方法，是因爲IE在6之前對(duì)box的(de)理(lǐ)解跟别人(rén)都不一樣，它的(de)寬度要包含邊線寬和(hé)空白。要想讓IE5等同其他(tā)浏覽器保持一緻，可(kě)以用(yòng)CSS的(de)方法：

　　padding: 2em;

　　border: 1em solid green;

　　width: 20em;

　　width/**/:/**/ 14em;

　　第一個(gè)寬度所有浏覽器都認得(de)，但IE5.x不認得(de)第2行的(de)寬度設置，隻因爲那一行上有空白的(de)注釋符号(多(duō)麽蠢的(de)語法分(fēn)析!)，所以IE5.x就用(yòng)20減掉一些空白，而其他(tā)浏覽器會用(yòng)14這(zhè)個(gè)寬度，因爲它是第2行，會覆蓋掉第1行。

　　3. 頁面的(de)最小寬度

　　min-width是個(gè)非常方便的(de)CSS命令，它可(kě)以指定元素最小也(yě)不能小于某個(gè)寬度，這(zhè)樣就能保證排版一直正确。但IE不認得(de)這(zhè)個(gè)，而它實際上把width當做(zuò)最小寬度來(lái)使。爲了(le)讓這(zhè)一命令在IE上也(yě)能用(yòng)，可(kě)以把一個(gè)

　　放到 标簽下(xià)，然後爲div指定一個(gè)類：

　　然後CSS這(zhè)樣設計：

　　#container

　　{

　　min-width: 600px;

　　width:expression(document.body.clientWidth < 600? "600px": "auto" );

　　}

　　第一個(gè)min-width是正常的(de);但第2行的(de)width使用(yòng)了(le)Javascript，這(zhè)隻有IE才認得(de)，這(zhè)也(yě)會讓你的(de)HTML文檔不太正規。它實際上通(tōng)過Javascript的(de)判定來(lái)實現最小寬度。

　　同樣的(de)辦法也(yě)可(kě)以爲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)度的(de)問題

　　IE不認得(de)min-這(zhè)個(gè)定義，但實際上它把正常的(de)width和(hé)height當作有min的(de)情況來(lái)使。這(zhè)樣問題就大(dà)了(le)，假如隻用(yòng)寬度和(hé)高(gāo)度，正常的(de)浏覽器裏這(zhè)兩個(gè)值就不會變，假如隻用(yòng)min-width和(hé)min-height的(de)話(huà)，IE下(xià)面根本等于沒有設置寬度和(hé)高(gāo)度。

　　5. 區(qū)分(fēn)大(dà)小寫

　　當在XHTML中使用(yòng)CSS，CSS裏定義的(de)元素名稱是區(qū)分(fēn)大(dà)小寫的(de)。爲了(le)避免這(zhè)種錯誤，我建議(yì)所有的(de)定義名稱都采用(yòng)小寫。

　　class和(hé)id的(de)值在HTML和(hé)XHTML中也(yě)是區(qū)分(fēn)大(dà)小寫的(de)，如果你一定要大(dà)小寫混合寫，請仔細确認你在CSS的(de)定義和(hé)XHTML裏的(de)标簽是一緻的(de)。

　　6. 取消class和(hé)id前的(de)元素限定

　　當你寫給一個(gè)元素定義class或者id，你可(kě)以省略前面的(de)元素限定，因爲ID在一個(gè)頁面裏是唯一的(de)，clas s可(kě)以在頁面中多(duō)次使用(yòng)。你限定某個(gè)元素毫無意義。