一、水平居中（父容器和子容器的寬度都是不一定的）

1.inline-block+text-align

如果不希望元素內的文字水平居中，那麼需要在child中設定text-align為left。

2.table+margin

只需要設定子元素。

3.absolute+transform

子元素不會對其他元素產生影響。

4.flex+justify-content

只需設定父元素。

二、垂直居中（父容器和子容器的高度都是不一定的）

1.table-cell+vertical-align

相容性比較好。

2.absolute+transform

子元素不會干擾其他的元素。

3.flex+align-items

只需對付元素進行設定。

三、居中（父容器和自容器的大小都是不確定的）

1.inline-block+text-align+table-cell+vertical-align

2.absolute+transform

3.flex+justify-content+align-items

四、多列布局（一列定寬，另一列自適應）

1.float+margin

改進方案：（清除浮動的時候不會出現問題）

2.float+overflow

3.table

table-cell不能設定margin，所以用padding值來設定間距。

4.flex

效能可能有問題，通常只用作小範圍的佈局，即left和right中的內容不要太多。

五、多列布局（一列不定寬，另一列自適應）

1.float+overflow

2.table（將table-layout：fixed刪除）

3.flex

六、全屏佈局（有固定區域也有自適應區域）

1.position

2.flex（css3新出現的概念）

flex-direction不設定時預設值為row，水平方向。
如果需要每個模組都自適應，通過裡面的內容來撐起寬高，則刪除程式碼中的高度設定就行。

七、響應式

1.少用定寬，多用自適應。

2.媒體查詢（防止手機螢幕太小布局發生變化）

裡面寫要改變顯示方式的樣式css

八、頁面優化

1.減少請求：
圖片合併、
減少css檔案請求，多個css檔案合併成一個、少量css樣式內聯、避免使用import方式引入css檔案（每個import都會產生請求，且同步）

2.減少圖片大小：
選擇合適的圖片格式
壓縮圖片（ImageOptim）

3.css值縮寫

4.省略值為0的單位px

5.顏色值最短表示：英文單詞、十六進位制、rgb

6.css選擇器合併

7.檔案壓縮：YUI Compressor

8.css檔案放在head中，js放在body的底部（js的載入會阻塞其他資源的載入，處理邏輯也需要等到所有頁面載入完成後才處理）

9.減少標籤數量

10.簡短選擇器長度

11.要給圖片設定寬高：img中的圖片儘量不要縮放，在標籤中就設定寬高

12.樣式表現多用css，少用js