前方有最簡單、最實用CSS布局技巧總結！

本文目的：給你個大綱，讓你快速又簡單的搞懂css布局那些事兒！（圖片只為女神！）

（一）浮動

• 優點：目前應用還是很廣泛，前人把路踩的也很寬啦！哈哈~

• 缺點：清除浮動！清除浮動！清除浮動！

  沒有垂直居中，沒有等高，也沒有順序無關性。

• 應用場景：確定現在不需要，以後也不需要垂直居中和等高的布局。

（二）inline-block

• 優點：能垂直居中，當然不需要多個斷點一次次的清除浮動。
• 缺點：空白！空白！空白！
  沒有等高，也沒有順序無關性。
• 應用場景：需要垂直居中，但是不需要等高；
  找到讓你的團隊不抓狂的對付空白的方法。

（三）display:table

• 優點：能垂直居中，還能等高！
• 缺點：沒有順序無關性；
  邊框問題費勁；
  應對響應式布局能力有限，從 n 列變 1 列ok，但是從 3 列變 2 列就無法做到。
• 應用場景：不能用 flexbox，又需要垂直居中 + 等高 + 從 n 列變 1 列的響應式布局。

（四）Flexbox

• 優點： 順序無關性！對響應式布局能力爆表！
  有垂直居中！還有等高！
  可以在沿 X 軸排列和沿 Y 軸排列間互相轉換

  可縮可放，可行可列，還有自適應空間能力

  同一效果可以有多種實現寫法
• 缺點：學著有點費勁！

ie9以下都用不了！

• 應用場景：不需要兼容ie9以下，需要縮放的時候表現很牛！

其他一些布局上的知識點：

1. 使用 max-width 替代 width 可以使瀏覽器更好地處理小窗口的情況。在移動設備上顯得尤為重要。

2. 當你設置一個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度。

3. 為了製作更多複雜的布局，需要用到定位 position 屬性。

4. 百分比是一種相對於包含塊的計量單位。它對圖片很有用：如下我們實現了圖片寬度始終是容器寬度的50%。

5. 媒體查詢是「響應式設計（Responsive Design）」 的強大工具！可以讓網站在任何情況下顯示的很棒！

6. 使用 meta 視口 可以讓你的布局在移動瀏覽器上顯示的更好。

7. 新的CSS屬性：column，可以輕鬆的實現文字的多列布局。

好了，以上就是這次分享的全部，歡迎批評補充，么么噠！