[面試題]關於CSS,你瞭解多少?

時間 2019-11-07

原文原文鏈接

導讀

都說金九銀十是一個面試的好季節，最近在GitHub上看到了一些關於前端的面試題，也比較基礎，在這裏整理了一下，由於內容較多，在這裏分爲HTML、CSS、JavaScript三篇，但願能夠對你們有所幫助，趁着「好季節」，找到本身心儀的工做,固然也包括我本身在內，你們一塊兒加油哈！css

由於掘金的某條沸點，在這裏先說明一下，本篇文章適合目前正在找工做或者以爲本身的基礎不太紮實的小夥伴，大神就跳過吧O(∩_∩)O。前端

轉發自 github.com/yangshun/fr…node

1.CSS 選擇器的優先級是如何計算的？

瀏覽器經過優先級規則，判斷元素展現哪些樣式。優先級經過 4 個維度指標肯定，咱們假定以a、b、c、d命名，分別表明如下含義：git

a表示是否使用內聯樣式（inline style）。若是使用，a爲 1，不然爲 0。
b表示 ID 選擇器的數量。
c表示類選擇器、屬性選擇器和僞類選擇器數量之和。
d表示標籤（類型）選擇器和僞元素選擇器之和。
複製代碼

優先級的結果並不是經過以上四個值生成一個得分，而是每一個值分開比較。a、b、c、d權重從左到右，依次減少。判斷優先級時，從左到右，一一比較，直到比較出最大值，便可中止。因此，若是b的值不一樣，那麼c和d無論多大，都不會對結果產生影響。好比0，1，0，0的優先級高於0，0，10，10。github

當出現優先級相等的狀況時，最晚出現的樣式規則會被採納。若是你在樣式表裏寫了相同的規則（不管是在該文件內部仍是其它樣式文件中），那麼最後出現的（在文件底部的）樣式優先級更高，所以會被採納。面試

在寫樣式時，我會使用較低的優先級，這樣這些樣式能夠輕易地覆蓋掉。尤爲對寫 UI 組件的時候更爲重要，這樣使用者就不須要經過很是複雜的優先級規則或使用!important的方式，去覆蓋組件的樣式了。瀏覽器

2.重置（resetting）CSS 和標準化（normalizing）CSS 的區別是什麼？你會選擇哪一種方式，爲何？

重置（Resetting）：重置意味着除去全部的瀏覽器默認樣式。對於頁面全部的元素，像margin、padding、font-size這些樣式所有置成同樣。你將必須從新定義各類元素的樣式。標準化（Normalizing）：標準化沒有去掉全部的默認樣式，而是保留了有用的一部分，同時還糾正了一些常見錯誤。sass

當須要實現很是個性化的網頁設計時，我會選擇重置的方式，由於我要寫不少自定義的樣式以知足設計需求，這時候就再也不須要標準化的默認樣式了。參考服務器

3.請闡述Float定位的工做原理。

浮動（float）是 CSS 定位屬性。浮動元素從網頁的正常流動中移出，可是保持了部分的流動性，會影響其餘元素的定位（好比文字會圍繞着浮動元素）。這一點與絕對定位不一樣，絕對定位的元素徹底從文檔流中脫離。框架

CSS 的clear屬性經過使用left、right、both，讓該元素向下移動（清除浮動）到浮動元素下面。

若是父元素只包含浮動元素，那麼該父元素的高度將塌縮爲 0。咱們能夠經過清除（clear）從浮動元素後到父元素關閉前之間的浮動來修復這個問題。

有一種 hack 的方法，是自定義一個.clearfix類，利用僞元素選擇器::after清除浮動。另外還有一些方法，好比添加空的

和設置浮動元素父元素的overflow屬性。與這些方法不一樣的是，clearfix方法，只須要給父元素添加一個類，定義以下：

.clearfix::after { content: ''; display: block; clear: both; }

值得一提的是，把父元素屬性設置爲overflow: auto或overflow: hidden，會使其內部的子元素造成塊格式化上下文（Block Formatting Context），而且父元素會擴張本身，使其可以包圍它的子元素。

4.請闡述z-index屬性，並說明如何造成層疊上下文（stacking context）。

CSS 中的z-index屬性控制重疊元素的垂直疊加順序。z-index只能影響position值不是static的元素。

沒有定義z-index的值時，元素按照它們出如今 DOM 中的順序堆疊（層級越低，出現位置越靠上）。非靜態定位的元素（及其子元素）將始終覆蓋靜態定位（static）的元素，而無論 HTML 層次結構如何。

層疊上下文是包含一組圖層的元素。在一組層疊上下文中，其子元素的z-index值是相對於該父元素而不是 document root 設置的。每一個層疊上下文徹底獨立於它的兄弟元素。若是元素 B 位於元素 A 之上，則即便元素 A 的子元素 C 具備比元素 B 更高的z-index值，元素 C 也永遠不會在元素 B 之上.

每一個層疊上下文是自包含的：當元素的內容發生層疊後，整個該元素將會在父層疊上下文中按順序進行層疊。少數 CSS 屬性會觸發一個新的層疊上下文，例如opacity小於 1，filter不是none，transform不是none。

5.請闡述塊格式化上下文（Block Formatting Context）及其工做原理。

塊格式上下文（BFC）是 Web 頁面的可視化 CSS 渲染的部分，是塊級盒佈局發生的區域，也是浮動元素與其餘元素交互的區域。

一個 HTML 盒（Box）知足如下任意一條，會建立塊格式化上下文：

float的值不是none.
position的值不是static或relative.
display的值是table-cell、table-caption、inline-block、flex、或inline-flex。
overflow的值不是visible。
複製代碼

在 BFC 中，每一個盒的左外邊緣都與其包含的塊的左邊緣相接。

兩個相鄰的塊級盒在垂直方向上的邊距會發生合併（collapse）。更多內容請參考邊距合併（margin collapsing）。

6.有哪些清除浮動的技術，都適用哪些狀況？

空div方法：<div style="clear:both;"></div>。
Clearfix 方法：上文使用.clearfix類已經提到。
overflow: auto或overflow: hidden方法：上文已經提到。
複製代碼

在大型項目中，我會使用 Clearfix 方法，在須要的地方使用.clearfix。設置overflow: hidden的方法可能使其子元素顯示不完整，當子元素的高度大於父元素時。

7.請解釋什麼是雪碧圖（css sprites），以及如何實現？

雪碧圖是把多張圖片整合到一張上的圖片。它被運用在衆多使用了不少小圖標的網站上（Gmail 在使用）。實現方法：

使用生成器將多張圖片打包成一張雪碧圖，併爲其生成合適的 CSS。
每張圖片都有相應的 CSS 類，該類定義了background-image、background-position和background-size屬性。
使用圖片時，將相應的類添加到你的元素中。
複製代碼

好處：

減小加載多張圖片的 HTTP 請求數（一張雪碧圖只須要一個請求）。可是對於 HTTP2 而言，加載多張圖片再也不是問題。
提早加載資源，防止在須要時纔在開始下載引起的問題，好比只出如今:hover僞類中的圖片，不會出現閃爍。
複製代碼

8.如何解決不一樣瀏覽器的樣式兼容性問題？

在肯定問題緣由和有問題的瀏覽器後，使用單獨的樣式表，僅供出現問題的瀏覽器加載。這種方法須要使用服務器端渲染。
使用已經處理好此類問題的庫，好比 Bootstrap。
使用 autoprefixer 自動生成 CSS 屬性前綴。
使用 Reset CSS 或 Normalize.css。
複製代碼

9.如何爲功能受限的瀏覽器提供頁面？使用什麼樣的技術和流程？

優雅的降級：爲現代瀏覽器構建應用，同時確保它在舊版瀏覽器中正常運行。
漸進式加強：構建基於用戶體驗的應用，但在瀏覽器支持時添加新增功能。
利用 caniuse.com 檢查特性支持。
使用 autoprefixer 自動生成 CSS 屬性前綴。
使用 Modernizr進行特性檢測。
複製代碼

10.有什麼不一樣的方式能夠隱藏內容（使其僅適用於屏幕閱讀器）？

這些方法與可訪問性（a11y）有關。

visibility: hidden：元素仍然在頁面流中，並佔用空間。
width: 0; height: 0：使元素不佔用屏幕上的任何空間，致使不顯示它。
position: absolute; left: -99999px： 將它置於屏幕以外。
text-indent: -9999px：這隻適用於block元素中的文本。
Metadata： 例如經過使用 Schema.org，RDF 和 JSON-LD。
WAI-ARIA：如何增長網頁可訪問性的 W3C 技術規範。
複製代碼

即便 WAI-ARIA 是理想的解決方案，我也會採用絕對定位方法，由於它具備最少的注意事項，適用於大多數元素，並且使用起來很是簡單。參考

https://www.w3.org/TR/wai-aria-1.1/
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
http://a11yproject.com/
複製代碼

11.你使用過柵格系統嗎？偏心哪個？

我使用 float-based 柵格系統，由於它相比 flex、grid 系統，擁有更多瀏覽器的支持。它已經在 Bootstrap 中使用多年，而且已經被證實是可行的。

12你是否使用過媒體查詢或移動優先的佈局？

是的，一個例子就是根據窗口的尺寸改變導航的樣式。

13.你熟悉製做 SVG 嗎？

是的，你可使用內聯CSS、嵌入式CSS部分或外部CSS文件對形狀進行着色（包括指定對象上的屬性）。在網上大部分SVG使用的是內聯CSS，不過每一個類型都有優勢和缺點。

經過設置fill和stroke屬性，能夠完成基本着色操做。fill能夠設置內部的顏色，stroke能夠設置周圍繪製的線條的顏色。你可使用與HTML中使用的CSS顏色命名方案相同的CSS顏色命名方案：顏色名稱（即red）、RGB值（即rgb(255,0,0)）、十六進制值、RGBA值等等。

14.編寫高效的 CSS 應該注意什麼？

首先，瀏覽器從最右邊的選擇器，即關鍵選擇器（key selector），向左依次匹配。根據關鍵選擇器，瀏覽器從 DOM 中篩選出元素，而後向上遍歷被選元素的父元素，判斷是否匹配。選擇器匹配語句鏈越短，瀏覽器的匹配速度越快。避免使用標籤和通用選擇器做爲關鍵選擇器，由於它們會匹配大量的元素，瀏覽器必需要進行大量的工做，去判斷這些元素的父元素們是否匹配。

BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override. BEM (Block Element Modifier)原則上建議爲獨立的 CSS 類命名，而且在須要層級關係時，將關係也體如今命名中，這天然會使選擇器高效且易於覆蓋。

搞清楚哪些 CSS 屬性會觸發從新佈局（reflow）、重繪（repaint）和合成（compositing）。在寫樣式時，避免觸發從新佈局的可能。

15.使用 CSS 預處理的優缺點分別是什麼？

優勢：

提升 CSS 可維護性。
易於編寫嵌套選擇器。
引入變量，增添主題功能。能夠在不一樣的項目中共享主題文件。
經過混合（Mixins）生成重複的 CSS。
Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
將代碼分割成多個文件。不進行預處理的 CSS，雖然也能夠分割成多個文件，但須要創建多個 HTTP 請求加載這些文件。
複製代碼

缺點：

須要預處理工具。
複製代碼

16.對於你使用過的 CSS 預處理，說說喜歡和不喜歡的地方？

喜歡：

絕大部分優勢上題以及提過。
Less 用 JavaScript 實現，與 NodeJS 高度結合。
複製代碼

不喜歡:

我經過node-sass使用 Sass，它用 C ++ 編寫的 LibSass 綁定。在 Node 版本切換時，我必須常常從新編譯。
Less 中，變量名稱以@做爲前綴，容易與 CSS 關鍵字混淆，如@media、@import和@font-face。
複製代碼

17.如何實現一個使用非標準字體的網頁設計？

使用@font-face併爲不一樣的font-weight定義font-family。

18.解釋瀏覽器如何肯定哪些元素與 CSS 選擇器匹配。

這部分與上面關於編寫高效的 CSS 有關。瀏覽器從最右邊的選擇器（關鍵選擇器）根據關鍵選擇器，瀏覽器從 DOM 中篩選出元素，而後向上遍歷被選元素的父元素，判斷是否匹配。選擇器匹配語句鏈越短，瀏覽器的匹配速度越快。

例如，對於形如p span的選擇器，瀏覽器首先找到全部元素，並遍歷它的父元素直到根元素以找到

元素。對於特定的，只要找到一個

，就知道'`已經匹配並中止繼續匹配。

19.描述僞元素及其用途。

CSS 僞元素是添加到選擇器的關鍵字，去選擇元素的特定部分。它們能夠用於裝飾（:first-line，:first-letter）或將元素添加到標記中（與 content:...組合），而沒必要修改標記（:before，:after）。

:first-line和:first-letter能夠用來修飾文字。
上面提到的.clearfix方法中，使用clear: both來添加不佔空間的元素。
使用:before和after展現提示中的三角箭頭。鼓勵關注點分離，由於三角被視爲樣式的一部分，而不是真正的 DOM。若是不使用額外的 HTML 元素，只用 CSS 樣式繪製三角形是不太可能的。
複製代碼

20.說說你對盒模型的理解，以及如何告知瀏覽器使用不一樣的盒模型渲染布局。

CSS 盒模型描述了以文檔樹中的元素而生成的矩形框，並根據排版模式進行佈局。每一個盒子都有一個內容區域（例如文本，圖像等）以及周圍可選的padding、border和margin區域。

CSS 盒模型負責計算：

塊級元素佔用多少空間。
邊框是否重疊，邊距是否合併。
盒子的尺寸。
複製代碼

盒模型有如下規則：

塊級元素的大小由width、height、padding、border和margin決定。
若是沒有指定height，則塊級元素的高度等於其包含子元素的內容高度加上padding（除非有浮動元素，請參閱下文）。
若是沒有指定width，則非浮動塊級元素的寬度等於其父元素的寬度減去父元素的padding。
元素的height是由內容的height來計算的。
元素的width是由內容的width來計算的。
默認狀況下，padding和border不是元素width和height的組成部分。
複製代碼

21.* { box-sizing: border-box; }會產生怎樣的效果？

元素默認應用了box-sizing: content-box，元素的寬高只會決定內容（content）的大小。
box-sizing: border-box改變計算元素width和height的方式，border和padding的大小也將計算在內。
元素的height = 內容（content）的高度 + 垂直方向的padding + 垂直方向border的寬度
元素的width = 內容（content）的寬度 + 水平方向的padding + 水平方向border的寬度
複製代碼

22.display的屬性值都有哪些？

none, block, inline, inline-block, table, table-row, table-cell, list-item.
複製代碼

23.inline和inline-block有什麼區別？

	block	inline-block	inline
大小	填充其父容器的寬度。	取決於內容。	取決於內容。
定位	重新的一行開始，而且不容許旁邊有 HTML 元素（除非是float）	與其餘內容一塊兒流動，並容許旁邊有其餘元素。	與其餘內容一塊兒流動，並容許旁邊有其餘元素。
可否設置width和height	能	能	不能。
可使用vertical-align對齊	不能夠	能夠	能夠
邊距（margin）和填充（padding）	各個方向都存在	各個方向都存在
浮動（float）	-	-	就像一個block元素，能夠設置垂直邊距和填充。

24.relative、fixed、absolute和static四種定位有什麼區別？

通過定位的元素，其position屬性值必然是relative、absolute、fixed或sticky。

static：默認定位屬性值。該關鍵字指定元素使用正常的佈局行爲，即元素在文檔常規流中當前的佈局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
relative：該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面佈局的前提下調整元素位置（所以會在此元素未添加定位時所在位置留下空白）。
absolute：不爲元素預留空間，經過指定元素相對於最近的非 static 定位祖先元素的偏移，來肯定元素位置。絕對定位的元素能夠設置外邊距（margins），且不會與其餘邊距合併。
fixed：不爲元素預留空間，而是經過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出如今的每頁的固定位置。fixed 屬性會建立新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改成該祖先。
sticky：盒位置根據正常流計算(這稱爲正常流動中的位置)，而後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在全部狀況下（即使被定位元素爲 table 時），該元素定位均不對後續元素形成影響。當元素 B 被粘性定位時，後續元素的位置仍按照 B 未定位時的位置來肯定。position: sticky 對 table 元素的效果與 position: relative 相同。
複製代碼

25.你使用過哪些現有的 CSS 框架？你是如何改進它們的？

Bootstrap： 更新週期緩慢。Bootstrap 4 已經處於 alpha 版本將近兩年了。添加了在頁面中普遍使用的微調按鈕組件。
Semantic UI：源代碼結構使得自定義主題很難理解。很是規主題系統的使用體驗不好。外部庫的路徑須要硬編碼（hard code）配置。變量從新賦值沒有 Bootstrap 設計得好。
Bulma： 須要不少非語義的類和標記，顯得不少餘。不向後兼容，以致於升級版本後，會破壞應用的正常運行。
複製代碼

26.你瞭解 CSS Flexbox 和 Grid 嗎？

瞭解。Flexbox 主要用於一維佈局，而 Grid 則用於二維佈局。

Flexbox 解決了 CSS 中的許多常見問題，例如容器中元素的垂直居中，粘性定位（sticky）的頁腳等。Bootstrap 和 Bulma 基於 Flexbox，這是建立佈局的推薦方式。我以前曾使用過 Flexbox，但在使用flex-grow時遇到了一些瀏覽器不兼容問題（Safari），我必須使用inline-blocks和手動計算百分比寬度，來重寫個人代碼，這種體驗不是很好。

Grid 建立基於柵格的佈局，是迄今爲止最直觀的方法（最好是！），但目前瀏覽器支持並不普遍。

27.響應式設計與自適應設計有何不一樣？

響應式設計和自適應設計都以提升不一樣設備間的用戶體驗爲目標，根據視窗大小、分辨率、使用環境和控制方式等參數進行優化調整。

響應式設計的適應性原則：網站應該憑藉一份代碼，在各類設備上都有良好的顯示和使用效果。響應式網站經過使用媒體查詢，自適應柵格和響應式圖片，基於多種因素進行變化，創造出優良的用戶體驗。就像一個球經過膨脹和收縮，來適應不一樣大小的籃圈。

自適應設計更像是漸進式加強的現代解釋。與響應式設計單一地去適配不一樣，自適應設計經過檢測設備和其餘特徵，從早已定義好的一系列視窗大小和其餘特性中，選出最恰當的功能和佈局。與使用一個球去穿過各類的籃筐不一樣，自適應設計容許使用多個球，而後根據不一樣的籃筐大小，去選擇最合適的一個。

28.什麼狀況下，用translate()而不用絕對定位？何時，狀況相反。

translate()是transform的一個值。改變transform或opacity不會觸發瀏覽器從新佈局（reflow）或重繪（repaint），只會觸發複合（compositions）。而改變絕對定位會觸發從新佈局，進而觸發重繪和複合。transform使瀏覽器爲元素建立一個 GPU 圖層，但改變絕對定位會使用到 CPU。所以translate()更高效，能夠縮短平滑動畫的繪製時間。

當使用translate()時，元素仍然佔據其原始空間（有點像position：relative），這與改變絕對定位不一樣。