前端面試知識點大全——CSS篇（二）
總綱：前端面試知識點大全
目錄
9.請解釋瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？
10.請描述偽元素 (pseudo-elements) 及其用途
1.如何為有功能限制的瀏覽器提供網頁？
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果使用者使用的是老式瀏覽器，則程式碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支援功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效。
漸進增強：從被所有瀏覽器支援的基本功能開始，逐步地新增那些只有新式瀏覽器才支援的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支援時，它們會自動地呈現出來併發揮作用。
2.有哪些的隱藏內容的方法？
display:none；visibility:hidden；overflow:hidden（針對溢位 ）；
3.柵格系統 (grid system)
柵格系統就是將頁面等分成固定數量的列與行，然後在每個格子中進行佈局設計。
3.1 Bootstrap
目前主流的柵格系統UI框架就是bootstrap。它將頁面分成12列，根據螢幕的大小分成lg、md、sm和xs四個等級，用以響應式的適配所有裝置。
在後面的章節中會講到。
3.2 Grid佈局
還有一種就是新的佈局方式，也稱之為grid，樣式屬性display:grid。可學習下面的連結。
https://www.jianshu.com/p/d183265a8dad
4.你用過媒體查詢，或針對移動端的佈局CSS 嗎？
媒體查詢有三個地方可以使用：
1、<link>、<style>等標籤帶有media屬性，用於限定媒體，可以同時接受多個媒體，以逗號隔開
例如：<link href='style.css' media='screen,print'> 該屬性預設值是‘all’
2、@import 後面的引數就是用於限制媒體的
例如：@import url('style.css') screen,print
3、@media 語法：@media mediatype and|not|only (media feature) {CSS-Code;}
例如：@media screen and (max-width: 500px){...}
主要使用到的媒體元素有screen(PC螢幕)、print（印表機）、speech（螢幕閱讀器），媒體功能有max-height、max-width、min-height、min-width等
具體引數參考菜鳥教程：http://www.runoob.com/cssref/css3-pr-mediaquery.html
移動端由於解析度等問題不適合使用px這種單位，推薦使用em或者rem單位。
em：是相對於當前物件內文字的font-size。此字型大小受從父元素繼承過來的字型大小，除非顯式重寫與一個具體單位。
rem：相對於根據html元素的font-size來計算大小，通常預設為16px
5.如何優化網頁的列印樣式？
使用媒體查詢匯入專門針對印表機的樣式。(print)
1、列印樣式表中最好不要用背景圖片，因為印表機不能列印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。
2、最好不要使用畫素作為單位，因為列印樣式表要打印出來的會是實物，所以建議使用pt和cm。
3、隱藏掉不必要的內容。（@print div{display:none;}）
4、列印樣式表中最好少用浮動屬性，因為它們會消失。
5、揭露連結
6、突現連結文字
7、如果想要知道列印樣式表的效果如何，直接在瀏覽器上選擇列印預覽就可以了。
6.在書寫高效 CSS 時會有哪些問題需要考慮？
1.瀏覽器是從右向左來解析一個選擇器的
2.ID最快，Universal最慢 有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
3.不要tag-qualify（永遠不要這樣做 ul#main-navigation { } ID已經是唯一的，不需要Tag來標識，這樣做會讓選擇器變慢。）
4.後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的： html body ul li a { }）
5.提取公共樣式，提高複用率
6.CSS3的效率問題（CSS3選擇器（比如 :nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會浪費很多的瀏覽器資源。）
7.儘量使用安全顏色，屬性縮寫，樣式初始化，瀏覽器相容問題，class和id命名的規範性。
7.使用 CSS 前處理器的優缺點有哪些？
目前主流的css前處理器包括Sass、Stylus和Less，其中Sass和Stylus是在伺服器端執行，而less在客戶端執行。Less可以在樣式表中使用JavaScript語法，是其突出的優點。他們都是拓展了css語言。
缺點：預編譯很容易造成後代選擇器的濫用；其次預編譯需要編譯過程，效率上會低一點
優點：CSS前處理器為CSS增加一些程式設計的特性，無需考慮瀏覽器的相容性問題，例如你可以在CSS中使用變數、簡單的邏輯程式、函式等等在程式語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於程式碼的維護等諸多好處。
Less學習：http://www.bootcss.com/p/lesscss/
Less學習(簡書)：https://www.jianshu.com/p/da1e1ceeae1a
8.如果設計中使用了非標準的字型，你該如何去實現？
1、使用@font-face
@font-face{
font-family:"自己的字型名字，可以隨便起，可以不和字型檔名相同";
src:url("下載的字型路徑");
}這個是css3的屬性，不過css2.1就已經出現了，css3加入了標準
2、使用google API
①Standard 方式：
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Condiment'>
②@import 方式：
@import url(http://fonts.googleapis.com/css?family=Condiment);
③JavaScript 方式：
（通過新增動態指令碼並執行來匯入字型，程式碼省略）
3、考慮優雅退化問題，使用系統自帶字型。
9.請解釋瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？
瀏覽器解釋css的時候是從右往左匹配的：
HTML 經過解析生成 DOM Tree（這個我們比較熟悉）；而在 CSS 解析完畢後，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。Render Tree 中的元素（WebKit 中稱為「renderers」，Firefox 下為「frames」）與 DOM 元素相對應，但非一一對應：一個 DOM 元素可能會對應多個 renderer，如文字折行後，不同的「行」會成為 render tree 種不同的 renderer。也有的 DOM 元素被 Render Tree 完全無視，比如 display:none 的元素。
在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來確定生成怎樣的 renderer。對於每個 DOM 元素，必須在所有 Style Rules 中找到符合的 selector 並將對應的規則進行合併。選擇器的「解析」實際是在這裡執行的，在遍歷 DOM Tree 時，從 Style Rules 中去尋找對應的 selector。
因為所有樣式規則可能數量很大，而且絕大多數不會匹配到當前的 DOM 元素（因為數量很大所以一般會建立規則索引樹），所以有一個快速的方法來判斷「這個 selector 不匹配當前元素」就是極其重要的。
如果正向解析，例如「div div p em」，我們首先就要檢查當前元素到 html 的整條路徑，找到最上層的 div，再往下找，如果遇到不匹配就必須回到最上層那個 div，往下再去匹配選擇器中的第一個 div，回溯若干次才能確定匹配與否，效率很低。
逆向匹配則不同，如果當前的 DOM 元素是 div，而不是 selector 最後的 em，那隻要一步就能排除。只有在匹配時，才會不斷向上找父節點進行驗證。
但因為匹配的情況遠遠低於不匹配的情況，所以逆向匹配帶來的優勢是巨大的。同時我們也能夠看出，在選擇器結尾加上「*」就大大降低了這種優勢，這也就是很多優化原則提到的儘量避免在選擇器末尾新增萬用字元的原因。
簡單的來說瀏覽器從右到左進行查詢的好處是為了儘早過濾掉一些無關的樣式規則和元素。
10.請描述偽元素 (pseudo-elements) 及其用途
10.1 偽類與偽元素
CSS3規定偽元素用::，偽類用:
偽元素：用於將特殊的效果新增到某些選擇器上（針對內容）
偽類：通過選擇器找到那些不存在於DOM樹中的資訊以及不能被常規CSS選擇器獲取到的資訊。
偽元素 :before :after :first-letter first-line等
偽類 :active :hover :link :visited :focus :first-child等
10.2 區別：
1、偽類與偽元素的根本區別在於它們是否創造了新的元素(抽象)。從我們模仿其意義的角度來看，如果需要新增新元素加以標識的，就是偽元素，反之，如果只需要在既有元素上新增類別的，就是偽類。
2.一個元素可以同時新增多個偽類，而每一次只能對一個偽元素進行操作。
3.書寫形式上的區別，單冒號是偽類，雙冒號是偽元素（但這點不能作為絕對區分的點）。