永遠不能忘了的致謝
在自己恬不知恥的說了火這個詞之後還是有夥伴們來看我的文章,也有支援我的人,這讓我保持了動力,因為每次文章的更新對於我來說都是一次鞭策,讓我寫了一天需求回家之後沒有懈怠,繼續保持學習狀態。
防誤傷引導
看的人可能有工作幾年的、也有像我一樣的剛剛畢業的小白菜前端(當然也有剛畢業就是一個大牛前端的)、也有還在學校準備著進入前端行業的學弟學妹。
有經驗、想指導的:可以留言指導,你的指導都可以幫助我和看官們少走一些彎路,我們都會由衷感謝您,
和我一樣剛畢業的童鞋們: 我們可以一塊交流,不同的見解可能碰撞出美妙的答案。
準備入行、準備面試的童鞋們,希望你們不要單純的去背面試題,學會理解知識,行業浮躁但是行業中的我們不要浮躁。背一道題你只會一道,理解一道題、一個知識點可以幫你會做一個型別的題,後者更累可是效率也更高,希望馬上要實習或者校招的你們有一個好的未來。加油!
話不多說 你好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!!!
我們會堅持下去,一定會。這條路大家都走的太辛苦,一起互相鼓勵,一起並肩同行!
不感興趣的就直接無視掉吧
因為身邊的同學從事網際網路相關職業的比較多,並且大家閒時聊天時總會吐槽找工作有很多坑,所以打算把身邊同學找工作的經驗,統統收集起來。提供給想從事這方面同學,希望圈內好友可以共同進步,共同少踩坑。