打死也不敢說自己火的面試題更新第二彈

酸楚與甘甜發表於2018-07-20

永遠不能忘了的致謝

在自己恬不知恥的說了火這個詞之後還是有夥伴們來看我的文章，也有支援我的人，這讓我保持了動力，因為每次文章的更新對於我來說都是一次鞭策，讓我寫了一天需求回家之後沒有懈怠，繼續保持學習狀態。

防誤傷引導

看的人可能有工作幾年的、也有像我一樣的剛剛畢業的小白菜前端（當然也有剛畢業就是一個大牛前端的）、也有還在學校準備著進入前端行業的學弟學妹。

有經驗、想指導的：可以留言指導，你的指導都可以幫助我和看官們少走一些彎路，我們都會由衷感謝您，

和我一樣剛畢業的童鞋們: 我們可以一塊交流，不同的見解可能碰撞出美妙的答案。

準備入行、準備面試的童鞋們，希望你們不要單純的去背面試題，學會理解知識，行業浮躁但是行業中的我們不要浮躁。背一道題你只會一道，理解一道題、一個知識點可以幫你會做一個型別的題，後者更累可是效率也更高，希望馬上要實習或者校招的你們有一個好的未來。加油！

話不多說你好CSS面試（依舊基礎）

1 請說一下什麼是盒子模型（真·基礎問題）
2 什麼是塊級格式化上下文（BFC）？什麼樣的元素會生成BFC？ BFC的佈局規則是怎樣的？

BFC的內容需要好好理解、一般會結合實際問題：比如margin重疊問題。

3 width與height設定的百分比是相對誰來計算的？padding與margin呢？
4 如何設定一個邊長等於瀏覽器寬度一半的正方形？

結合上個問題。元素的padding是相對於父元素的寬度來計算的，那麼答案是不是一目瞭然。還有一個答案可以參考下一個問題。

5 請問你瞭解vm vh這個單位嗎？
6 如何實現一個元素的垂直居中？
7 對flex佈局有所瞭解嗎？請用flex佈局實現一個三列布局
8 可以不用flex實現一個三列布局嗎？

針對於萬一讓你說兩種情況或者flex佈局你緊張的遺忘了，請大膽使用聖盃佈局與雙飛燕佈局大法。

9 position屬性有幾個值？哪些值會脫離文件流？absolute是相對於誰來定位的？relative呢？
10 rem與em瞭解嗎？分別是相對於誰來計算的？
11 瞭解移動端的適配嗎？請問什麼是rem佈局？在移動端的1px問題該如何解決。

親身經歷過一小段時間的rem佈局，可以瞭解一下Retina屏，以及一些物理畫素的知識，淘寶的無限適配可以瞭解一下，媒體查詢也不要忘記。

12 對於css3的transform有了解嗎？
13 對於css3的動畫有了解嗎？必填屬性有哪些？
14 在實現一個div移動的動畫，使用translate、top（代指定位）、margin之間有什麼效能上的不同？

這個問題涉及一個渲染層的內容。如果回答出來可能順勢就問到如何建立一個渲染層。

15 cpu與gpu有了解嗎？區別是什麼？如何呼叫gpu渲染。

對於瀏覽器重拍重繪問題不再這裡討論了，我還得捋一捋忘的厲害，在以後繼續學習瀏覽器效能方面一定會再拿出來討論。

16 最後一籮筐：如何清除浮動？什麼是css樣式初始化？為什麼要這麼做？css選擇器的權重都是什麼？什麼是偽類與偽元素？

上面這個小籮筐問題相對來說，見的應該已經很多了。而且是真的出現在自己平時的學習與做的小專案中，我也就就不多提了，也不確定面試會不會問。

這些css問題在我看來使用率是真的很高的。移動端rem佈局、flex佈局、css動畫、高度寬度百分比問題。尤其是在接觸與vue、react這種框架一塊使用的UI庫比如element-ui以及ant-desgin你沒有這些知識，沒有這些知識的儲備想要修改這些UI庫的樣式達到自己想要的效果就很難了。css是一個黑魔法，知識可以說是無窮無盡，希望大家正視它。

總結與雞湯

雖然做的是面試題的總結。但是每每回想這些面試題的內容，我就在考慮這些知識是不是很難一蹴而就、一學就會的？好像是。做為一名剛入行的小白菜前端，每天做著產品經理給的需求，除了週六日（雙休的公司還蠻幸福的）已經很難找到大塊時間去學習了，週六周天想要打磨自己的基礎，但是一想上了五天班看什麼書，玩去咯。每一項基礎知識都在改變你寫程式碼的習慣。當你知道translate會建立新的層的時候，不考慮相容的話，你就會更多的使用它。當你瞭解了重排重繪的原因，你有意迴避這些的出現，你的專案流暢性就會越來越好，紮實的基礎真的可以幫助你更合理的考慮問題與編碼。扯遠了扯遠了，願每一位看官看完這一段雞湯有一個好心情。

加油咯不斷前進的FE！！！