關於別人前端面試的問題的回答(CSS篇)

時間 2019-12-04

原文原文鏈接

問：什麼是CSS reset

在不一樣瀏覽器之間，默認樣式有着諸多差別和問題，而爲了在不一樣瀏覽器之間具有相同的視覺效果，開發人員每每會在樣式表文件中引入一段CSS代碼，如http://meyerweb.com/eric/tools/css/reset/reset200802.css，咱們把這個過程叫作CSS reset。 css

固然，好處就和他的做用同樣。可是咱們應該認識其缺點，不少如排版標籤，列表標籤等這樣的語義元素就失去了他的意義，在沒有爲其設置其餘樣式時，視覺上和其餘內容也沒了區別；若是頁面內有第三方內容嵌入，則會影響第三方內容的視覺效果；而不少開發人員更是直接百度一段代碼，複製到本身的項目中，我認爲這樣的開發是不負責任的。html

我的認爲在項目中可根據需求對一些全局樣式進行設置，如字體，字號等，而對於元素的樣式設置應該經過選擇器精確的設置。在項目中，本人通常都會創建一個基礎的樣式文件，裏面編寫通用的類選擇器，在須要的元素上添加類名達到重置的效果。如前端

.no-padding {padding: 0;}
  .only-content {padding: 0;margin: 0;border: 0}

<body class="only-content user-difined-className"></body>

問：CSS性能優化

在看到這個問題的時候，捫心自問，還真沒在項目中考慮太多CSS性能優化。如下內容由網絡信息總結。web

做爲一名前端，在開始學習時就會知道一句話——樣式放在文檔頭部，腳本放在文檔底部。根據瀏覽器工做過程，咱們知道渲染是在加載完樣式文件後開始的，因此樣式文件放在頭部可減小頁面空白的時間，而放在底部，頁面須要等待HTML內容加載完成纔會加載樣式文件，就會致使頁面有段時間看上去沒有樣式（的確沒有）。express

在CSS優化中，衆所周知的估計就是加載優化吧。在實際項目中，通常經過減小使用import或者不使用import，壓縮文件體積等方式來減小網絡請求，減小傳輸內容來提升加載性能。編程

咱們能夠從如下方面進行調優：瀏覽器

儘可能避免使用： expression表達式[IE]以及filter屬性[IE]。expression表達式在文檔的不少交互事件中都會執行，如頁面滾動，鼠標滾動，改變窗口大小等；而filter屬性比較消耗內存(很是),不只如此，因此用到該filter的元素渲染時都會從新分析該樣式，並且下載filter裏的圖片會致使瀏覽器中止渲染。性能優化
css縮寫：在css中不少屬性可設置多個值，如margin，padding，border，font，background等，儘可能直接對該屬性設置多個值，避免多個值分開設置，如微信

no:
padding-left: 0;
padding-right: 1px;
padding-top: 2px;
padding-bottom: 3px;
do: 
padding: 2px 1px 3px 0

減小使用沒必要要的並行規則，如button#oneBtn{...},button.btn{...}。對於瀏覽器來說，定位一個oneBtn和.btn比同時定位button#oneBtn,button.btn更快。網絡
儘可能減小規則層數，層數越多，定位越慢(很是慢)，使用一個有語義的選擇器每每可以取得更好的效率。
利用好繼承機制。
減小重佈局以及重繪。改變元素大小，位置的css屬性將會致使相關圖層從新佈局，不改變節點的大小和位置的屬性改變不會觸發重佈局，若是改變了渲染效果會觸發重繪。

問：CSS預處理

什麼是CSS預處理呢？CSS預處理是一種技術，能夠很好的提高CSS的編程性，開發效率以及可維護性，就是像編寫其餘程序同樣，能夠經過定義變量，調用函數等方式編寫程序，最後經過特殊的處理器輸出CSS代碼。

該技術發展到今天，已經有不少成熟的CSS預處理器語言，如Sass，LESS等，並在不少大型項目中使用。

問：浮動的原理和工做方式，會產生什麼影響呢，要怎麼處理？

工做方式：浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

影響:

浮動會致使父元素沒法被撐開，影響與父元素同級的元素。
與該浮動元素同級的非浮動元素，若是是塊級元素，會移動到該元素下方，而塊級元素內部的行內元素會環繞浮動元素；而若是是內聯元素則會環繞該浮動元素。
與該元素同級的浮動元素，對於同一方向的浮動元素(同級)，兩個元素將會跟在碰到的浮動元素後；而對於不一樣方向的浮動元素，在寬度足夠時，將分別浮動向不一樣方向，在寬度不一樣是將致使一方換行(換行與HTML書寫順序有關，後邊的將會浮動到下一行)
浮動元素將被視做爲塊元素
而浮動元素對於其父元素以外的元素，若是是非浮動元素，則至關於忽視該浮動元素，若是是浮動元素，則至關於同級的浮動元素。
而經常使用的清除浮動的方法，則如使用空標籤，overflow，僞元素等。在使用基於浮動設計的CSS框架時，自會提供清除的方法，我的並不習慣使用浮動進行佈局。