CSS書寫應該遵循如下順序：

1. 定位屬性：position  display  float  left  top  right  bottom   overflow  clear   z-index
2. 自身屬性：width  height  padding  border  margin   background
3. 文字樣式：font-family   font-size   font-style   font-weight   font-varient   color 
4. 文字屬性：text-align   vertical-align   text-wrap   text-transform   text-indent    text-decoration   letter-spacing    word-spacing    white-space   text-overflow
5. css3中新增屬性：content   box-shadow   border-radius  transform……

為什麼是這樣的順序呢，需要了解一下回流和重構，這決定著css樣式書寫順序的優化方向

文件載入完成到完全顯示之間的過程：

1. 根據文件載入生成DOM樹（包含display：none；節點）；
2. 在DOM樹基礎上根據節點的幾何屬性（padding、margin、width等）生成render樹（不包含display：none：和head，但是包括visibility:hidden;）；
3. 在render樹基礎上繼續渲染color、outline等樣式；

     當render樹上的一部分或者全部，因為大小邊距等問題發生改變需要重建的過程叫做迴流

     當元素的一部分屬性如背景色等發生變化，而不影響頁面佈局需要重新渲染的過程叫做重繪。

有了對文件載入過程的理解，我們很容易發現，要想網頁載入得快，載入得流暢，就要減少瀏覽器迴流，提升dom的效能

      在解析過程中，一旦瀏覽器發現某個元素的定位變化影響佈局，則需要倒回去重新渲染，所以定位元素和z-index要放在最開始的位置，上來就告訴瀏覽器應當怎麼載入。