一、常見佈局型別

1. 表格佈局：原始佈局方式，利用表格的特性展示佈局，沒有頁面邏輯且大量冗餘程式碼，現在幾乎不用
2. 固定寬：常用960px，移動端縮放表現差，不友好
3. 流式：使用float實現動態浮動，各解析度下樣式無法保證
4. flex彈性盒子：簡潔且強大，主流使用
5. css柵格佈局（grid）：將網頁分成一系列行和列，將對應內容放入對應區域；新屬性相容性差

二、flex彈性盒子：

1.組成部分：彈性容器 + 彈性專案（必須為容器的子代）

2.可對容器進行設定的屬性：flex-flow、justify-content、align-items、align-content

flex-flow是flex-direction和flex-wrap的組合:
flex-direction: row/row-reverse/column/column-reverse;
flex-wrap: wrap/nowrap/wrap-reverse;


flex-direction為row時，justify-content用與彈性項的橫向分佈;
column時justify-content會失效，此時只能用align-items調整分佈；
justify-content：flex-start/flex-end/center/space-between（兩端對齊）/space-around;


flex-direction為row時，align-items用於彈性項在容器中的縱向分佈；
column時用於彈性項橫向分佈；
align-items：flex-start/flex-end/center/baseline（內部第一個元素的基線）/strectch（拉伸）;


當flex項允許折行，且確實有多行時，使用align-content屬性調整格式：
align-content: flex-start/flex-end/center/space-between/space-around/stretch
 

 3.對彈性項設定的屬性：order、align-self、flex

設定order屬性來進行排序：數字越小越靠前，不必是連續的數字，類似z-index；

設定align-self來覆蓋align-item設定的縱向對其格式；

 *彈性項的flex很重要，靈活且強大，重點掌握flex-grow的值如何使用

 flex屬性預設為flex: 0 1 auto;

三個值分別表示flex-grow（伸展）、flex-shrink（收縮）、flex-basis（基數）;

flex: 1; 是flex: 1 1 0%;的簡寫（0%表示彈性項寬度完全取決於grow的值）

此三個屬性，flex-basis只有當容器設定為可折行（wrap）時才生效，shrink當彈性項的basis值之和大於容器時生效（各項按設定的比例收縮）

 

 4.彈性專案的margin特殊作用：設定為auto時自動利用剩餘空間

<div class="box">
    <p class="logo">Title</p>
    <a href="">first</a>
    <a href="">second</a>
    <a href="">third</a>
    <a href="" >forth</a>
</div>

.box{
    display:flex;
    align-items:flex-end;
}
.logo{
    margin-right:auto;
    /* 此屬性會讓右側四個a標籤全部靠向最右側 */
}

三、響應式web設計

是一種網頁設計的理念，根本目的是在各種螢幕解析度下儘可能為使用者提供良好的網頁視覺佈局，主要實現方式是通過html和css相關技術的配合。

html角度：消除瀏覽器預設縮放頁面

<meta name='viewport' content='width=device-width, initial-scale=1.0>

css角度：媒體查詢

<link rel='stylesheet' href='***' media='(min-width: 481px) and (max-width: 768px)'>

@import url('./') (min-width: 481px) and (max-width: 768px);

@media (min-width:481px) and (max-width: 768px) {
    body{
         ***
    }
}

彈性img：

 將影象寬高設定為百分比（缺點是移動端使用者耗費額外的流量下載過大的圖片）

四、柵格系統grid：

使用方法：display: grid/ inline-grid;

元素：容器、內容項

個人感覺grid更側重於整體佈局，雖然能實現比flex更細粒度的頁面控制，但相比於flex卻也更復雜。可問題是這樣更復雜的實現實用價值並不大，更何況還有相容性問題。所以目前很少有大面積用grid佈局的網頁，看以後css社群如何開發grid的新用法吧。

參考：https://www.jianshu.com/p/d183265a8dad