#### 1. CSS盒模型，在不同瀏覽器的差異
1. 分為標準盒模型( w3c )和 IE盒模型
2. 標準盒模型：width = width -- box-sizing: content-box ( 默認值 )
完整的盒子占位計算：width(內容) + padding(填充) + border(邊框) + margin(邊界)
3. IE盒模型：width = width + padding + border -- box-sizing: border-box
完整的盒子占位計算：width(內容) + margin(邊界)
#### 2. CSS所有選擇器及其優先級、使用場景，哪些可以繼承，如何運用at規則
1. !important --> 內聯樣式 --> ID選擇器 --> 類選擇器 --> 標簽選擇器和偽元素選擇器 --> * > + ~ 符號選擇器
2. 10000 --> 1000 --> 100 --> 10 --> 1 --> 0
#### 3. CSS偽類和偽元素有哪些，它們的區別和實際應用
1. 偽類包含兩種：狀態偽類和結構性偽類
1. 狀態偽類：active focus hover link visited
2. 結構性偽類也就是新的CSS3選擇器：first-child last-child nth-child nth-last-child...
2. 偽元素是對元素中的特定內容進行操作，或者操作源文檔元素不存在的內容，比如在DOM前后添加虛擬元素
1. 常見的偽元素：:before :after :first-letter :first-line
2. CSS3推薦使用::雙冒號區分偽類，IE9支持，如果需要兼容IE8及以下則使用:單冒號
#### 4. HTML文檔流的排版規則，CSS幾種定位的規則、定位參照物、對文檔流的影響，如何選擇最好的定位方式 ，雪碧圖的實現原理
#### 5. 浮動
1. 浮動的核心：浮動元素會脫離文檔流向左/向右浮動，直到碰到父元素或者另一個浮動元素
2. 浮動元素可以設置寬高，因為瀏覽器將display屬性設置成為block了
3. 浮動元素的父盒子高度會塌陷，因為子元素浮動脫離了文檔流
4. 浮動最先的設計是用來實現文字環繞功能的
5. 可以通過觸發BFC來進行清除浮動：父元素添加 overflow: hidden
6. 清除浮動的最佳實踐：clear屬性添加要需要清除浮動的元素上，不需要zoom: 1，那是IE6/7的兼容方案
```
.clearfix::before, .clearfix::after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
```
#### 5. 水平垂直居中的方案、可以實現6種以上并對比它們的優缺點
1. 移動端使用 flex 方案
2. PC端分為居中元素固定寬高與不固定寬高
3. 居中元素固定寬高：絕對定位 + 負margin、絕對定位 + margin、絕對定位 + CSS3計算函數
4. 居中元素不固定寬高：絕對定位 + transform、display: table-cell、flex
```
--> 方法一：絕對定位 + 負margin
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
--> 方法二：絕對定位 + margin
.wp {
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
--> 方法三：絕對定位 + CSS3計算函數
.wp {
position: relative;
}
.box {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
--> 方法四：絕對定位 + transform
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
--> 方法五：table布局，table單元格中的內容天然是垂直居中，設置水平居中即可
.wp {
text-align: center;
}
.box {
display: inline-block;
height: 50px;
}
--> 方法六：display: table-cell，模擬table布局，不需要table那么多代碼
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
--> 方法七：flex
.wp {
display: flex;
justify-content: center;
align-items: center;
}
```
#### 6. BFC實現原理，可以解決的問題，如何創建BFC
1. 簡單來說：BFC就是創建一個不受外界干擾也不干擾外界的盒子
2. 解決問題：清除浮動
3. 一般常用的是：overflow:hidden，其它非常多的樣式屬性也能觸發
#### 7. 可使用CSS函數復用代碼，實現特殊效果
#### 8. PostCSS Sass Less的異同，以及使用配置，至少掌握一種
#### 9. CSS模塊化方案、如何配置按需加載、如何防止CSS阻塞渲染
#### 10. 熟練使用CSS實現常見動畫，如漸變、移動、旋轉、縮放等等
#### 11. CSS瀏覽器兼容性寫法，了解不同API在不同瀏覽器下的兼容性情況
#### 12. 瀏覽器是怎樣解析CSS選擇器的
1. 樣式規則從關鍵選擇器開始從左向右進行匹配，會一直查找規則匹配的父元素，直到匹配成功或匹配失敗
#### 12. 掌握一套完整的響應式布局方案
#### 13. margin合并
1. 在正常流當中，上下兩個元素的margin會進行合并，取元素的最大margin
2. 浮動后元素的margin正常顯示
#### 13. CSS技術書籍
