今天師父上了第一堂課，講了一些關于浏覽器處理css的事兒。也算是一種好的習慣吧~
1、頁面上用到的一些背景圖檔，如果是一些比較小的圖檔，應該把他們合成到一張圖檔上，然後通過background-position來設定背景圖檔的位置。
這樣做的好處是：a、一張圖檔的大小會比很多張分散的圖檔小
b、這樣可以一次加載完圖檔，比如你做按鈕的普通和hover狀态時，如果用兩張圖檔，那麼在一些浏覽器下，hover的時候明顯有一個空白再切換圖檔的過程，這樣是無法滿足我們的要求的。而如果合成一張圖檔，通過background-position就不會有這種問題了。
c、如果多個css樣式都會用到合成的圖檔，那麼最後将它們放到一起來設定它們的背景圖檔。如div1,div2{background:url(..),no-repeat;}IE6下不會緩存圖檔，這樣的話就避免了每次讀到一個樣式的時候都要重新加載同一張圖檔
最主要的好處就是：減少浏覽器與伺服器之間的通信次數
2、寫css樣式的時候，最好按照（display|list-style|position|float|clear等顯示屬性）->（width|height|margin|padding|border|background等自身屬性，盒模型樣式）->（color|line-height|font|text-decoration|text-align|vertical-align|white-space|other|text|content等文本屬性）寫 。
當然并不代表非得按這個順序寫，但這種寫法可以使css結構更清晰易讀，修改起來比較友善。而且在團隊項目中能更好地提高效率。
ps:這種寫法由Mozilla工程師推薦，先寫顯示屬性，再寫自身屬性，再寫文字屬性，可以使css結構更清晰易讀，修改起來比較友善。另外對渲染性能也有好處。
是以一個好的習慣是很重要的。
謝謝各位提出的問題。
轉載于:https://www.cnblogs.com/okbeng/archive/2011/08/03/css110803.html