2.CSS 規范：

(1) id 與 class 的命名可以反映元素目的和用途。
(2) CSS 選擇器中避免使用標簽名。
(3) 盡量使用子選擇器，如 .header>ul{...}。
(4) 盡量使用縮寫屬性，如：background: #ffffff url(a.png) no-repeat fixed top;。
(5) 0后盡量不帶單位，如：margin: 0;。
(6) 屬性順序格式：結構性屬性(display -> position -> overflow、float、clear -> margin、padding)->表現性屬性(background、border -> font、text)。

1.傳統盒模型：

(1) 文檔流布局：最基本的布局，按照文檔的順序顯示。
(2) 浮動布局：使用 float 屬性，使元素脫離文檔流顯示。
(3) 定位布局：通過 position 屬性進行定位，屬性值分別有：static、relative、absolute、fixed。
1) static：元素塊正常生成。
2) relative：相對定位。相對于元素的原始位置進行定位。元素偏移某個距離，其原本空間仍保留。
3) absolute：絕對定位。相對于其包含塊定位，也可以說是相對于除 static 定位外第一個父元素進行定位，元素在原正常文檔流中所占空間會關閉，不占位。
4) fixed: 相對于瀏覽器窗口進行定位。

2.常用CSS布局：

(1) 固定寬度水平居中：
1) margin: 0 auto;
2) 絕對定位居中：父容器相對定位，子容器絕對定位，top: 50%;left: 50%; margin-left 和 margin-top 均設為寬高的一半的負值;
3) 使用 transform（需要注意的是瀏覽器兼容 ie9+ 不適宜用于移動開發）：父容器相對定位，子容器絕對定位，top: 50%;left: 50%;transform: translate(-50%,-50%);
(2) 未知寬度水平居中：
子容器設為 inline-block 屬性，父容器設置 text-align: center;
(3) 多個塊級元素水平居中：
1) 子容器設為 inline-block 屬性，父容器設置 text-align: center;
2) flex 布局：父容器設置為 display: flex;justify-content: center; 即將子元素在主軸上的對齊方式設置為居中。
(4) 單行元素垂直居中：將子元素的行高設置等于高度，即 height 與 line-height 設置為相等。
(5) 多行元素垂直居中：
table-cell 方式：父容器設置為 display: table; 子容器設置為  display: table-cell;vertical-align: middle;。

3.flex 布局：

(1) 彈性布局，使用方法是將 display 屬性設置為 flex，也可以設置行內的 flex。
(2) 注意：
1) webkit 內核的瀏覽器要加上 -webkit 前綴。
2) 設為 flex 布局后，子元素的 float、clear 與 vertical-align 屬性均失效。
(3) flex 布局，父容器屬性：
1) flex-direction：主軸的方向。row(默認值，水平方向起點在左)、row-reverse(水平方向起點在右)、column(垂直方向起點在上)、column-reverse(垂直方向起點在下)。
2) flex-wrap：超出父容器子容器的排列樣式。nowrap(默認值，不換行)、wrap(換行，第一行在上)、wrap-reverse(換行，第一行在下)。
3) flex-flow：flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值為 row nowrap。
4) justify-content：子容器在主軸的排列方向。flex-start(默認值，左對齊)、flex-end(右對齊)、center(居中)、space-between(兩端對齊，間隔相等)、space-around(兩側間隔相等)。
5) align-items：子容器在交叉軸的排列方向。flex-start(交叉軸的起點對齊)、flex-end(交叉軸的終點對齊)、center(交叉軸的中點對齊)、baseline(項目第一行文字的基線對齊)、stretch(默認值，未設置高度或設為auto的將占滿整個容器的高度)。
6) align-content：定義了多根軸線的對齊方式，一根軸線該屬性失效。flex-start(交叉軸的起點對齊)、flex-end(交叉軸的終點對齊)、center(交叉軸的中點對齊)、space-between(交叉軸的兩端對齊，軸線間隔平均分布)、space-around(軸線兩側間隔相等)、stretch(默認值，軸線占滿整個交叉軸)。
(4) flex 布局，子容器屬性：
1) order：子容器的排列順序。
2) flex-grow：子容器剩余空間的拉伸比例。
3) flex-shrink：子容器超出空間的壓縮比例，此屬性生效，父容器屬性要設為nowrap。
4) flex-basis：子容器在不伸縮情況下的原始尺寸。
5) flex：子元素的 flex 屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫。
6) align-self：允許單個項目有與其他項目不一樣的對齊方式?？筛采w父容器 align-items 屬性，默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。

4.grid 網格布局：

(1) 網格布局，使用方法是通過 display 屬性設置屬性值為 grid 或 inline-grid 或 subgrid。
(2) 注意：
1) 當元素設置了網格布局，column、float、clear、vertical-align 屬性無效。
2) 設置網格布局后，網格容器的所有子元素會自動變成網格項目(grid item)，然后設置列(grid-template-columns)和行(grid-template-rows)的大小，設置 grid-template-columns 有多少個參數，生成的 grid 列表就有多少列，沒有設置 grid-template-columns，則默認只有一列，寬度為父元素的100%。
(3) css fr 單位：一個新出的自適應單位，被用于在一系列長度值中分配剩余空間。
(4) 創建行或列的最小或最大尺寸：minmax() 函數。
第一個參數定義網格軌道的最小值，第二個參數定義網格軌道的最大值。可以接受任何長度值，也接受 auto 值。auto 值允許網格軌道基于內容的尺寸拉伸或擠壓。
(5) 創建重復的網格軌道：repeat() 屬性。
創建相等尺寸的網格項目和多個網格項目。第一個參數定義網格軌道應該重復的次數，第二個參數定義每個軌道的尺寸。
(6) 創建列與列之間的距離：grid-column-gap。
(7) 創建行與行之間的距離：grid-row-gap。
(8) 定義網格區域：grid-template-areas。
grid-template-areas 布局優勢：在不設置高度的情況下（父容器和 grid-template-rows 的值，或者 grid-template-rows 設置為 auto 時，slider 和 content 的高度是一致的，并且會根據其內的高度自適應）。

網格布局舉例：

html部分：

header
sidebar
content
lists
lists
lists
lists
lists
lists
footer

css部分：

.grid_container {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    background-color: #FAE3D9;
    grid-template-areas: "header header" "sidebar content" "footer footer";
    grid-template-rows: auto;
    grid-template-columns: 200px;
}
.header {
    grid-area: header;
    padding: 20px;
    background-color: #61C0BF;
}
.sidebar {
    grid-area: sidebar;
    padding: 15px;
    background-color: #BBDED6;
}
.content {
    grid-area: content;
    padding: 15px;
    background-color: #FFB6B9;
}
.content>ul li {
    padding: 3px 0;
    text-align: left;
    padding-left: 30px;
    box-sizing: border-box;
}
.footer {
    grid-area: footer;
    padding: 20px;
    background-color: #61C0BF;
}

截圖示意：