前端 CSS 面試大綱

背景

參加完 廈門第四屆CSS Conf 後，讓我對 CSS 產生了新的思考。CSS 是前端必須熟練掌握並保持持續關注的技術，可是我又不想在 CSS 身上耗費太多精力，由於一般狀況下都會有比寫 CSS 更要緊的活兒等我去作。這聽起來很矛盾，要想掌握好又不想花太多精力，人就是懶，不過這也正是我想要的。

因此我想以一種「高效而功利」的態度去學習 CSS，主要基於如下兩點：

• 前端技術體系太多，不可能去熟練掌握每一項技術
• 人的精力有限，把時間花在當前(或可預見的將來)對你最有價值的事情上

而對於 CSS 關注，我想大致分三類吧：

• 出於對 CSS 技術的熱愛以及 Geek 精神
• 出於工做須要去研究學習以及 Coding
• 準備面試

目前對於 CSS，我屬於後面兩類。本文的目的也就是：

讓你在工做中順手的使用 CSS，在跳槽的時候能寫上「熟練使用 CSS 且熟悉 W3C 標準」並順利應對面試。

下面我會結合本身的學習經驗以及面試經驗進行分析。

CSS 的學習

之前入門時在圖書館借了不少 CSS 書看，有些其實寫的通常，看了感受有些浪費精力，因此這裏我嘗試提出一條短路徑：

1. 若是你是前端小白，推薦先看看《Head First HTML與CSS(第2版)》，Head First 系列很是適合小白入門；
2. 若是你前端入門了，推薦去看《CSS 權威指南(第3版)》，好好鞏固一下 CSS2.1 的知識；
3. 若是你 CSS 基礎打好了，再去看看《精通CSS(第2版)》，雖然100%不能保證你真的能精通，可是會加深理解；
4. 最後無論你如今處於什麼段位了，都去看看《CSS 揭祕》。

以後你能夠選擇繼續看其餘書，但我我的並不推薦花這個精力。由於學完上面幾本以後你對 CSS 已經有了一個系統的認知，其餘書多少會有重疊的部分，收益不大，而且書上多數技術是過期的。更好的作法是關注一下業界知名博客（如 w3cplus）和業內 CSS 方面專家，好比一絲大漠張鑫旭等，他們是活教材。另外訂閱一下 CSS Weekly 郵件推送，每週保持對最新技術的關注，訂閱源選一個就好，多了反而會分散你的精力，由於 CSS 方面技術只是大前端技術體系的一小部分。

固然作到這些還不夠，想要更全面的理解 CSS，還得去看 W3C CSS 相關的 specifications。可是 spec 太多，不可能所有看完，我們的目的是熟練，不是精通，因此咱們也只挑重要的，好比：

• CSS 2.1
• CSS Basic User Interface Module Level 3(CSS3 UI)
• CSS Values and Units Module Level 3
• CSS Backgrounds and Borders Module Level 3
• CSS Image Values and Replaced Content Module Level 3
• CSS Flexible Box Layout Module Level 1
• CSS Grid Layout Module Level 1
• CSS Custom Properties for Cascading Variables Module Level 1

其中 CSS 2.1 的最重要，也有 中文版 的，其餘的能夠過一遍當作補充。這裏列出了大綱：https://www.w3.org/TR/CSS/ 能夠挑本身感興趣的看，有的仍是很是有意思的。若是你確實看不下去的話只啃 2.1 也能夠，應付工做和麪試應該夠了（當年面阿里時特地把 2.1 看了一遍，只要面試官問 CSS 我就特開心）。我們的目的是熟練，不是精通，當你對 CSS 有了一個系統化的認知後就只須要 keep an eye on 了，不用擔憂落伍，由於你關注的大佬們確定會發給你一手(或者最新二手)資料。

到了這一步理論知識已經 OK 了，若是你真的仔細看了上面 spec 能夠說在 CSS 方面已經超越了大部分人甚至是面試官，趁機吹一波應該沒問題，可是在實踐部分咱們也須要準備一下。好比說 CSS 預處理器，組件化，工程化，兼容性處理等方面，這些主要是基於本身的開發經驗 + 業界流行技術方案進行準備。工做上主要靠 Google，面試時最好有相關案例，好比寫本身在某個項目中對 CSS 進行優化成功將 CSS 整體積精簡了60%之類的就很亮眼了。可是在開始談面試前我想先提出一個概念——學霸面試模型：

學校的學習和公司的工做有不少類似的地方。平時咱們都在完成老師(公司)佈置的做業(需求)，實際上作做業（需求）的時候是能夠線下谷歌百度交流學習的，可是考試（面試）是閉卷，除了少數課程敢裸考以外，通常仍是須要考試（面試）前複習的。我想各位程序員若是如今直接再面試一次本身公司還不必定能過，不過這樣沒有意義，得給同窗們充分的時間準備，即便是學霸期末也不敢裸考。而且你會發現學霸跟大神老是驚人的類似，平時上課（上班）積極動手積極思考，幫助其餘同窗答疑解惑，深得老師（老闆）喜歡，考試（跳槽）前最嗨的是他們，考完（入職）後分數最好（薪資最高）的每每仍是他們。因此對於面試，請參考上學那會兒大家班學霸的姿式。

固然這個概念的名字是我瞎取的。完成了以上工做若是面試官問到 CSS 相關的問題大機率會加分，可是切記要寫「熟練」，不要寫「精通」，你永遠不知道對面的面試官是什麼 CSS 段位。

CSS 考前準備

完成以上過程後你對 CSS 已經有了一個全面的知識體系了，剩下的就是劃重點刷題準備考試了。刷題的目的不是題自己，而是梳理知識脈絡，由於面試官不會單純的只問你固定的問題，因此切記不要在本身沒有對 CSS 有一個體系化的認知下就去刷題（這跟學霸考前溫習和學渣考前突擊是一個道理），這樣即便能過也拿不到高分（面試高分 == 高薪，重點圈起來）。因此複習很重要，切忌裸考，事關工資，責任重大。

而一旦你的知識體系化，你會發現押題很是輕鬆，只要按照 spec 來劃重點就能夠了，我將其劃分爲理論篇和實踐篇兩大類：

理論篇

• CSS 標準的制定過程是怎樣的？(對標準的理解)
• CSS 層疊樣式優先級怎麼計算？(考察層疊的順序以及 important 的影響)
• CSS 有哪些選擇器？如何計算優先級？(基礎題，答錯死)
• CSS 對元素屬性賦值的詳細過程？(指定值-計算值-應用值-實際值)
• CSS 有哪些單位以及含義區別？(再結合 dpr 適配/響應式一塊兒問)
• CSS 盒模型的理解？(繼續拓展外邊距合併，塊級盒行內盒)
• CSS 如何處理文檔流？(常規流，浮動，定位，BFC，IFC，GFC...理解這塊許多面試題迎刃而解)
• CSS 可視化效果，如何處理裁剪和溢出？overflow 和 clip？display 和 visibility?
• CSS 字體匹配策略？字體族？文字效果？
• 好了我先寫這麼多吧

實踐篇

• 如何實現物理 1px 效果？
• 如何實現水平垂直居中？
• 常見佈局方案？浮動佈局？流式佈局？彈性佈局？Flex 佈局？網格佈局？
• 無線端響應式適配方案？
• CSS 模塊化/組件化設計？
• CSS 多邊框的實現方案？
• 如何實現 CSS 埋點統計？
• CSS 硬件加速？性能優化方面？
• CSS 預處理器和後處理器？autoprefixer？postCSS？
• 太多了一時半會兒想不全...

乍一看知識點很是多，可是100%不會全考，你要學會循序善誘。尤爲是實踐篇，你要突出本身的重點並將面試官朝你擅長的方向引導。好比你寫在 CSS 組件化方面有研究，那通常面試官是不會想到去問你兼容性相關問題的，若萬一面試官真問你怎麼兼容 IE，我建議你放棄這家公司，來支付寶。

總結

這篇文章可能並非那麼正能量，由於對於技術咱們是須要有 Geek 精神的，可是本文卻違背了這一點，由於我以爲 Geek 精神是須要有一個方向的，除非你的方向就是 CSS 方面專家，不然精力上確定跟不上，想一想天天工做辣麼久，還得去看電影，去裝修，去找妹子，去帶娃，想一想就以爲時間好像都被狗吃了。因此若是你真的願意花時間去看各類 spec，去關注 CSS 的進展，你其實被我騙了，這並非一種「高效而功利」的態度，而是前端工程師應該有的態度。

哎，這套路我本身打99分，我其實並非想騙你們去關注 CSS 的，我只是以爲，咱們在工做之餘，仍是得好好思考下前端工程師的精神和價值。