言

又到了一年一度的“金三銀四的季節了”。不過恐怕大家都有感覺，當下，正面臨著近幾年來的最嚴重的互聯網寒冬，因此今天的“金三銀四”肯定又是一場更為慘烈的江湖廝殺。

為了提升在廝殺中的“生存率”，讓我們從面經開始如果吧。這將是一個長篇系列。這篇文章讓我們先從CSS開始。

CSS

1. 盒模型

頁面渲染時，dom 元素所采用的 布局模型?？赏ㄟ^box-sizing進行設置。根據計算寬高的區域可分為：

• content-box (W3C 標準盒模型)
• border-box (IE 盒模型)
• padding-box
• margin-box

2. BFC

塊級格式化上下文，是一個獨立的渲染區域，讓處于 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

IE下為 Layout，可通過 zoom:1 觸發

• 觸發條件:
• 根元素
• positon: absolute/fixed
• display: inline-block / table
• float 元素
• ovevflow !==visible
• 規則:
• 屬于同一個 BFC 的兩個相鄰 Box 垂直排列
• 屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊
• BFC 中子元素不會超出他的包含塊
• BFC 的區域不會與 float 的元素區域重疊
• 計算 BFC 的高度時，浮動子元素也參與計算
• 文字層不會被浮動層覆蓋，環繞于周圍
• 應用:
• 阻止margin重疊
• 可以包含浮動元素 —— 清除內部浮動(清除浮動的原理是兩個div都位于同一個 BFC 區域之中)
• 自適應兩欄布局
• 可以阻止元素被浮動元素覆蓋

3.層疊上下文

元素提升為一個比較特殊的圖層，在三維空間中 (z軸) 高出普通元素一等。

• 觸發條件
• 根層疊上下文(html)
• position
• css3屬性
• flex
• transform
• opacity
• filter
• will-change
• -webkit-overflow-scrolling
• 層疊等級：層疊上下文在z軸上的排序
• 在同一層疊上下文中，層疊等級才有意義
• z-index的優先級最高(從高往低排，順序如下：)
• z-index正直
• z-index 0 / auto
• 行內元素
• 浮動元素
• 塊級元素
• z-index為負
• background / border

4. 居中布局

• 水平居中
• 行內元素: text-align: center
• 塊級元素: margin: 0 auto
• absolute + transform
• flex + justify-content: center
• 垂直居中
• line-height: height
• absolute + transform
• flex + align-items: center
• table
• 水平垂直居中
• absolute + transform
• flex + justify-content + align-items

5. 選擇器優先級

• !important > 行內樣式 > #id > .class > tag > * > 繼承 > 默認
• 選擇器 從右往左 解析

6.去除浮動影響，防止父級高度塌陷

• 通過增加尾元素清除浮動
• :after /
• : clear: both
• 創建父級 BFC
• 父級設置高度

7.link 與 @import 的區別

• link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css
• 當解析到link時，頁面會同步加載所引的 css，而@import所引用的 css 會等到頁面加載完才被加載
• @import需要 IE5 以上才能使用
• link可以使用 js 動態引入，@import不行

8. CSS預處理器(Sass/Less/Postcss)

CSS預處理器的原理: 是將類 CSS 語言通過 Webpack 編譯 轉成瀏覽器可讀的真正 CSS。在這層編譯之上，便可以賦予 CSS 更多更強大的功能，常用功能:

• 嵌套
• 變量
• 循環語句
• 條件語句
• 自動前綴
• 單位轉換
• mixin復用

面試中一般不會重點考察該點，一般介紹下自己在實戰項目中的經驗即可~

9.CSS動畫

• transition: 過渡動畫
• transition-property: 屬性
• transition-duration: 間隔
• transition-timing-function: 曲線
• transition-delay: 延遲
• 常用鉤子: transitionend
• animation / keyframes
• animation-name: 動畫名稱，對應@keyframes
• animation-duration: 間隔
• animation-timing-function: 曲線
• animation-delay: 延遲
• animation-iteration-count: 次數
• infinite: 循環動畫
• animation-direction: 方向
• alternate: 反向播放
• animation-fill-mode: 靜止模式
• forwards: 停止時，保留最后一幀
• backwards: 停止時，回到第一幀
• both: 同時運用 forwards / backwards
• 常用鉤子: animationend
• 動畫屬性: 盡量使用動畫屬性進行動畫，能擁有較好的性能表現
• translate
• scale
• rotate
• skew
• opacity
• color

總結

通常，CSS 并不是重點的考察領域，但這其實是由于現在國內業界對 CSS 的專注不夠導致的，真正精通并專注于 CSS 的團隊和人才并不多。因此如果能在 CSS 領域有自己的見解和經驗，反而會為相當的加分和脫穎而出。