CSS3 新特性有哪些？
常用：新增選擇器、flex 佈局、圓角、漸變、陰影、文字溢出、背景效果、邊框效果、轉換、平滑過渡、動畫、媒體查詢等。
BFC 是什麼？
BFC：塊級格式化上下文
觸發方式：
1. 浮動元素（float 不是 none）；
2. 絕對定位元素（元素的 positon 爲 absolute 或 fixed）；
3. 行內塊元素（inline block）；
4. overflow 值不爲 visible 的塊元素；
5. 彈性元素的 flex-item（display 爲 flex 或 inline-flex 元素的直接子元素）；
6. 使用最新的 display：flow-root 觸發沒有上面副作用。
解決什麼問題：
1. 清除浮動；
2. 防止 margin 合併；
如何實現垂直居中？
1. 最常用：flex 佈局
2. 子絕父相，left：50% right:50% 配合 transform: translate(-50%,-50%)
3. 子絕父相，定位全部爲 0 配合 margin: auto
4. table tr td 只有一個時自帶居中
5. div 僞裝 tabel 居中 display: table-cell
6. 100% 高度的子元素添加前後僞元素設置 vertical-align: middle
CSS 選擇器優先級如何確定？
![image]()
總結：
1. 選擇器越具體，其優先級越高
2. 相同優先級，出現在後面的，覆蓋前面的
3. 屬性後面添加 !important 的優先級最高，少用
如何清除浮動？
1. 給父元素添加 .clearfix
2. 給父元素添加 overflow:hidden 觸發 BFC
CSS 兩種盒子模型區別？
content-box（標準盒模型）：實際寬度 = width（content） + padding + border
border-box（IE 盒模型）：實際寬度 = width（content + padding + border）
border-box 更符合我們人類的視覺效果（IE 做了回好事）
說說 flex （重點）？
flex 是 flexible box 縮寫，意爲“彈性佈局”。
flex 核心概念：
1. felx-container、flex-item
2. main-axis（主軸）、cross-axis（交叉軸）
3. main-start（主軸的開始位置）、main-end、cross-start、cross-end
4. main-size（單個項目佔據的主軸空間）、cross-size
flex-container 屬性：
1. flex-direction：主軸的方向
2. flex-wrap：一條軸線上放不小如何換行
3. flex-flow：flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值爲 row nowrap
4. justify-content：主軸上的對齊方式
5. align-items：交叉軸上如何對齊
6. align-content：多根軸線的對齊方式
flex-item 屬性：
1. order：項目的排列順序。數值越小，排列越靠前，默認爲 0
2. flex-grow：“成長”，item 佔據剩餘空間的比例
3. flex-shrink：“縮小”， item 縮小超出空間的比例
4. flex-basis：在分配多餘空間之前，項目佔據的主軸空間（main size）
5. flex：flex-grow, flex-shrink 和 flex-basis 的簡寫，默認值爲 0 1 auto
6. align-self：允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items 屬性（很少用）
