前言
又到了一年一度的“金三銀四的季節了”。不過恐怕大家都有感覺，當下，正面臨著近幾年來的最嚴重的互聯網寒冬，因此今天的“金三銀四”肯定又是一場更為慘烈的江湖廝殺。
為了提升在廝殺中的“生存率”，讓我們從面經開始如果吧。這將是一個長篇系列。這篇文章讓我們先從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 領域有自己的見解和經驗，反而會為相當的加分和脫穎而出。
分享到:
閱讀更多 碼農登陸 的文章
