很多網站建設高手都知使用css縮寫，因為使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。這里就著重總結了一些css常用技巧，為網站重構打下基礎。

　　1. Block和inline元素對比

　　所有的HTML元素都屬于block和inline之一。

　　block元素的特點是：

　　總是在新行上開始;

　　高度，行高以及頂和底邊距都可控制;

　　寬度缺省是它的容器的100%，除非設定一個度 和

　　是塊元素的例子。

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

　　和其他元素都在一行上;

　　高，行高及頂和底邊距不可改變;

　　寬度就是它的文字或圖片的寬度，不可改變。

　　, 和是inline元素的例子。

　　用display: inline 或display: block命令就可以改變一個元素的這一特性。什么時候需要改變這一屬性呢?

　　讓一個inline元素從新行開始;

　　讓塊元素和其他元素保持在一行上;

　　控制inline元素的寬度(對導航條非凡有用);

　　控制inline元素的高度;

　　無須設定寬度即可為一個塊元素設定與文字同寬的背景色。

　　2. 再來一個box黑客方法

　　之所以有這么多box黑客方法，是因為IE在6之前對box的理解跟別人都不一樣，它的寬度要包含邊線寬和空白。要想讓IE5等同其他瀏覽器保持一致，可以用CSS的方法：

　　padding: 2em;

　　border: 1em solid green;

　　width: 20em;

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

　　第一個寬度所有瀏覽器都認得，但IE5.x不認得第2行的寬度設置，只因為那一行上有空白的注釋符號(多么蠢的語法分析!)，所以IE5.x就用20減掉一些空白，而其他瀏覽器會用14這個寬度，因為它是第2行，會覆蓋掉第1行。

　　3. 頁面的最小寬度

　　min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個

　　放到 標簽下，然后為div指定一個類：

　　然后CSS這樣設計：

　　#container

　　{

　　min-width: 600px;

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

　　}

　　第一個min-width是正常的;但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判定來實現最小寬度。

　　同樣的辦法也可以為IE實現最大寬度：

　　#container

　　{

　　min-width: 600px;

　　max-width: 1200px;

　　width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";

　　}

　　4. IE與寬度和高度的問題

　　IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，假如只用寬度和高度，正常的瀏覽器里這兩個值就不會變，假如只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度。

　　5. 區分大小寫

　　當在XHTML中使用CSS，CSS里定義的元素名稱是區分大小寫的。為了避免這種錯誤，我建議所有的定義名稱都采用小寫。

　　class和id的值在HTML和XHTML中也是區分大小寫的，如果你一定要大小寫混合寫，請仔細確認你在CSS的定義和XHTML里的標簽是一致的。

　　6. 取消class和id前的元素限定

　　當你寫給一個元素定義class或者id，你可以省略前面的元素限定，因為ID在一個頁面里是唯一的，clas s可以在頁面中多次使用。你限定某個元素毫無意義。