大廠面試必備：css面試題彙總
小夥伴們，前幾天的css面試題彙總大全看的怎麼樣呢，今天，繼續來更新最後一彈，咱們閒言少敘，進入正題。
如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群：733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習
41、上下margin重合的問題
在重合元素外包裹一層容器，並觸發該容器生成一個BFC。例子：
42、設定元素浮動後，該元素的display值是多少？
自動變成display:block
43、移動端的佈局用過媒體查詢嗎？
通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應相應的裝置的顯示。
- <head>裡邊<linkrel=”stylesheet” type=”text/css” href=”xxx.css”media=”only screen and (max-device-width:480px)”>
- CSS: @media only screen and (max-device-width:480px) {/css樣式/}
44、CSS優化、提高效能的方法有哪些？
- 避免過度約束
- 避免後代選擇符
- 避免鏈式選擇符
- 使用緊湊的語法
- 避免不必要的名稱空間
- 避免不必要的重複
- 最好使用表示語義的名字。一個好的類名應該是描述他是什麼而不是像什麼
- 避免！important，可以選擇其他選擇器
- 儘可能的精簡規則，你可以合併不同類裡的重複規則
45、瀏覽器是怎樣解析CSS選擇器的？
CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多效能。若從右向左匹配，先找到所有的最右節點，對於每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。
兩種匹配規則的效能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的效能都浪費在了失敗的查詢上面。
而在 CSS解析完畢後，需要將解析的結果與DOMTree 的內容一起進行分析建立一棵RenderTree，最終用來進行繪圖。在建立RenderTree 時（WebKit中的「Attachment」過程），瀏覽器就要為每個DOMTree 中的元素根據CSS的解析結果（StyleRules）來確定生成怎樣的RenderTree。
46、在網頁中的應該使用奇數還是偶數的字型？為什麼呢？
使用偶數字體。偶數字號相對更容易和web設計的其他部分構成比例關係。Windows自帶的點陣宋體（中易宋體）從Vista開始只提供12、14、16px 這三個大小的點陣，而13、15、17px時用的是小一號的點。（即每個字佔的空間大了1px，但點陣沒變），於是略顯稀疏。
47、margin和padding分別適合什麼場景使用？
何時使用margin：
- 需要在border外側新增空白
- 空白處不需要背景色
- 上下相連的兩個盒子之間的空白，需要相互抵消時。
何時使用padding：
- 需要在border內側新增空白
- 空白處需要背景顏色
- 上下相連的兩個盒子的空白，希望為兩者之和。
相容性的問題：在IE5IE6中，為float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決。
48、元素豎向的百分比設定是相對於容器的高度嗎？
當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的，但是，對於一些表示豎向距離的屬性，例如padding-top, padding-bottom , margin-top , margin-bottom等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。
49、全屏滾動的原理是什麼？用到了CSS的哪些屬性？
原理：有點類似於輪播，整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那麼高度是500%，只是展示100%，剩下的可以通過transform進行y軸定位，也可以通過margin-top實現
50、什麼是響應式設計？響應式設計的基本原理是什麼？如何相容低版本的IE？
響應式網站設計(ResponsiveWeb design)是一個網站能夠相容多個終端，而不是為每一個終端做一個特定的版本。基本原理是通過媒體查詢檢測不同的裝置螢幕尺寸做處理。頁面頭部必須有meta宣告的viewport。
51、視差滾動效果？
視差滾動（ParallaxScrolling）通過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來創建出令人驚歎的3D效果。
- CSS3實現:優點：開發時間短、效能和開發效率比較好，缺點是不能相容到低版本的瀏覽器
- jQuery實現:通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。**優點：**能相容到各個版本的，效果可控性好**缺點：**開發起來對製作者要求高
- 外掛實現方式:例如：parallax-scrolling，相容性十分好
52、::before和:after中雙冒號和單冒號有什麼區別？解釋一下這2個偽元素的作用
- 單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。
- ::before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。並不存在於dom之中，只存在在頁面之中。
:before和:after這兩個偽元素，是在CSS2.1裡新出現的。起初，偽元素的字首使用的是單冒號語法，但隨著Web的進化，在CSS3的規範裡，偽元素的語法被修改成使用雙冒號，成為::before::after
53、你對line-height是如何理解的？
行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height，沒有定義height屬性，最終其表現作用一定是line-height。單行文字垂直居中：把line-height值設定為height一樣大小的值可以實現單行文字的垂直居中，其實也可以把height刪除。
多行文字垂直居中：需要設定display屬性為inline-block。
54、怎麼讓Chrome支援小於12px的文字？
55、讓頁面裡的字型變清晰，變細用CSS怎麼做？
-webkit-font-smoothing在window系統下沒有起作用，但是在IOS裝置上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
56、;在android下無效怎麼處理？
57、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？
多數顯示器預設頻率是60Hz，即1秒重新整理60次，所以理論上最小間隔為1/60＊1000ms＝16.7ms
58、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬於字元,這些空白也會被應用樣式，佔據空間，所以會有間隔，把字元大小設為0，就沒有空格了。解決方法：
- 可以將<li>程式碼全部寫在一排
- 浮動li中float：left
- 在ul中用font-size：0（谷歌不支援）；可以使用letter-space：-3px
59、display:inline-block什麼時候會顯示間隙？
- 有空格時候會有間隙解決：移除空格
- margin正值的時候解決：margin使用負值
- 使用font-size時候解決：font-size:0、letter-spacing、word-spacing
60、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度
外層div使用position：relative；高度要求自適應的div使用; top: 100px; bottom: 0; left: 0
61、png、jpg、gif這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
- png是行動式網路圖片（PortableNetwork Graphics）是一種無損資料壓縮點陣圖檔案格式.優點是：壓縮比高，色彩好。大多數地方都可以用。
- jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。
- gif是一種點陣圖檔案格式，以8位色重現真色彩的影象。可以實現動畫效果.
- webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，相容性不好，目前谷歌和opera支援。
62、style標籤寫在body後與body前有什麼區別？
頁面載入自上而下當然是先載入樣式。寫在body標籤後由於瀏覽器以逐行方式對HTML文件進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標籤）會導致瀏覽器停止之前的渲染，等待載入且解析樣式表完成之後重新渲染，在windows的IE下可能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）
63、闡述一下CSSSprites
將一個頁面涉及到的所有圖片都包含到一張大圖中去，然後利用CSS的background-image，background-repeat，background-position的組合進行背景定位。利用CSSSprites能很好地減少網頁的http請求，從而大大的提高頁面的效能；CSSSprites能減少圖片的位元組。
至此，全部的css面試題彙總就全部更新完了，希望能夠幫助到各位的學習。小夥伴們還希望看到什麼型別的乾貨呢，可以留言告訴小編哦~更多前端案例、習題、筆記、程式碼盡在下方學習群，讓我們一起進步吧！
最後，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群：733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習
如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊