摘要：前言本文講解道前端面試的的內容。文章原文地址前端硬核面試專題之問。前端硬核面試專題的完整版在此前端硬核面試專題，包含數據結構與算法。

本文講解 55 道前端面試的 CSS 的內容。

復習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累！

注意：文章的題與題之間用下劃線分隔開，答案僅供參考。

筆者技術博客首發地址 GitHub，歡迎關注。

文章原文地址：前端硬核面試專題之 CSS 55 問 。

前端硬核面試專題的完整版在此：前端硬核面試專題，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 數據結構與算法 + Git 。

盒子模型的理解 ?

標準模式和混雜模式（IE）。

在標準模式下瀏覽器按照規范呈現頁面；

在混雜模式下，頁面以一種比較寬松的向后兼容的方式顯示。

混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。

CSS 盒子模型具有內容 (content)、填充 (padding)、邊框 (border)、邊界 (margin)這些屬性。

我們所說的 width，height 指的是內容 (content) 的寬高。

一個盒子模型的中：

寬度 = width+ pdding(寬) + border(寬)。

高度 = height + padding(高) + border(高)。

如何在頁面上實現一個圓形的可點擊區域 ？

1、map+area 或者 svg

2、border-radius

3、純 js 實現，需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

實現不使用 border 畫出 1px 高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。

CSS 中哪些屬性可以同父元素繼承 ?

繼承：(X)HTML 元素可以從其父元素那里繼承部分 CSS 屬性，即使當前元素并沒有定義該屬性，比如： color，font-size。

box-sizing 常用的屬性有哪些 ？分別有什么作用 ？

常用的屬性：content-box、 border-box 、inherit

作用

content-box(默認)：寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。

border-box：元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

頁面導入樣式時，使用 link 和 @import 有什么區別 ？

link 屬于 XHTML 標簽，除了加載 CSS 外，還能用于定義 RSS(是一種描述和同步網站內容的格式，是使用最廣泛的 XML 應用), 定義 rel 連接屬性等作用；

而 @import 是 CSS 提供的，只能用于加載 CSS;

頁面被加載的時，link 會同時被加載，而 @import 引用的 CSS 會等到頁面被加載完再加載;

import 是 CSS2.1 提出的，只在 IE5 以上才能被識別，而 link 是 XHTML 標簽，無兼容問題。

總之，link 要優于 @import。

常見兼容性問題？

瀏覽器默認的 margin 和 padding 不同。解決方案是加一個全局的 *{margin: 0; padding: 0;} 來統一。

IE下 event 對象有 event.x，event.y 屬性，而 Firefox 下沒有。Firefox 下有 event.pageX，event.PageY 屬性，而 IE 下沒有。

解決辦法：var mx = event.x ? event.x : event.pageX;

Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超鏈接訪問過后 hover 樣式就不出現了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了，解決方法是改變 CSS 屬性的排列順序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

清除浮動，什么時候需要清除浮動，清除浮動都有哪些方法 ？

一個塊級元素如果沒有設置 height，那么其高度就是由里面的子元素撐開，如果子元素使用浮動，脫離了標準的文檔流，那么父元素的高度會將其忽略，如果不清除浮動，父元素會出現高度不夠，那樣如果設置 border 或者 background 都得不到正確的解析。

正是因為浮動的這種特性，導致本屬于普通流中的元素浮動之后，包含框內部由于不存在其他普通流元素了，也就表現出高度為 0（高度塌陷）。在實際布局中，往往這并不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。

清除浮動的方式

父級 div 定義 height，原理：父級 div 手動定義 height，就解決了父級 div 無法自動獲取到高度的問題。?

結尾處加空 div 標簽 clear: both，原理：添加一個空 div，利用 css 提高的 clear: both 清除浮動，讓父級 div 能自動獲取到高度。

父級 div 定義 overflow: hidden， ?原理：必須定義 width 或 zoom: 1，同時不能定義 height，使用 overflow: hidden 時，瀏覽器會自動檢查浮動區域的高度?

父級 div 也一起浮動?。

父級 div 定義 display: table?。

父級 div 定義 偽類 :after 和 zoom?。

結尾處加 br 標簽 clear: both，?原理：父級 div 定義 zoom: 1 來解決 IE 浮動問題，結尾處加 br 標簽 clear: both。

總結：比較好的是倒數第 2 種方式，簡潔方便。

如何保持浮層水平垂直居中 ？

一、水平居中?

（1）行內元素解決方案

只需要把行內元素包裹在一個屬性 display 為 block 的父層元素中，并且把父層元素添加如下屬性即可。

.parent {
    text-align: center;
}

（2）塊狀元素解決方案
?

.item {
    /* 這里可以設置頂端外邊距 */
    margin: 10px auto;
}

（3）多個塊狀元素解決方案將元素的 display 屬性設置為 inline-block，并且把父元素的 text-align 屬性設置為 center 即可:

.parent {
    text-align:center;
}

（4）多個塊狀元素解決方案

使用 flexbox 布局，只需要把待處理的塊狀元素的父元素添加屬性 display: flex 及 justify-content: center 即可。

.parent {
    display: flex;
    justify-content: center;
}

二、垂直居中

（1）單行的行內元素解決方案

.parent {
    background: #222;
    height: 200px;
}

/* 以下代碼中，將 a 元素的 height 和 line-height 設置的和父元素一樣高度即可實現垂直居中 */
a {
    height: 200px;
    line-height:200px; 
    color: #FFF;
}

（2）多行的行內元素解決方案組合

使用 display: table-cell 和 vertical-align: middle 屬性來定義需要居中的元素的父容器元素生成效果，如下：

.parent {
    background: #222;
    width: 300px;
    height: 300px;
    /* 以下屬性垂直居中 */
    display: table-cell;
    vertical-align: middle;
}

（3）已知高度的塊狀元素解決方案

.item{
    position: absolute;
    top: 50%;
    margin-top: -50px;  /* margin-top值為自身高度的一半 */
    padding:0;
}

三、水平垂直居中

（1）已知高度和寬度的元素解決方案 1

這是一種不常見的居中方法，可自適應，比方案 2 更智能，如下：

.item{
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

（2）已知高度和寬度的元素解決方案 2

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 設置margin-left / margin-top 為自身高度的一半 */
    margin-left: -75px;
}

（3）未知高度和寬度元素解決方案

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用 css3 的 transform 來實現 */
}

（4）使用 flex 布局實現

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 注意這里需要設置高度來查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}

position 、float 和 display 的取值和各自的意思和用法

position

position 屬性取值：static(默認)、relative、absolute、fixed、inherit、sticky。

postision：static；始終處于文檔流給予的位置。看起來好像沒有用，但它可以快速取消定位，讓 top，right，bottom，left 的值失效。在切換的時候可以嘗試這個方法。

除了 static 值，在其他三個值的設置下，z-index 才會起作用。確切地說 z-index 只在定位元素上有效。

position：relative 和 absolute 都可以用于定位，區別在于前者的 div 還屬于正常的文檔流，后者已經是脫離了正常文檔流，不占據空間位置，不會將父類撐開。

定位原點 relative 是相對于它在正常流中的默認位置偏移，它原本占據的空間任然保留；absolute 相對于第一個 position 屬性值不為 static 的父類。所以設置了 position：absolute，其父類的該屬性值要注意，而且 overflow：hidden 也不能亂設置，因為不屬于正常文檔流，不會占據父類的高度，也就不會有滾動條。

fixed 舊版本 IE 不支持，卻是很有用，定位原點相對于瀏覽器窗口，而且不能變。

常用于 header，footer 或者一些固定的懸浮 div，隨滾動條滾動又穩定又流暢，比 JS 好多了。fixed 可以有很多創造性的布局和作用，兼容性是問題。

position：inherit。

規定從父類繼承 position 屬性的值，所以這個屬性也是有繼承性的，但需要注意的是 IE8 以及往前的版本都不支持 inherit 屬性。

sticky ：設置了sticky 的元素，在屏幕范圍（viewport）時該元素的位置并不受到定位影響（設置是 top、left 等屬性無效），當該元素的位置將要移出偏移范圍時，定位又會變成 fixed，根據設置的 left、top 等屬性成固定位置的效果。

float

float：left (或 right)，向左（或右）浮動，直到它的邊緣碰到包含框或另一個浮動框為止。

且脫離普通的文檔流，會被正常文檔流內的塊框忽略。不占據空間，無法將父類元素撐開。

任何元素都可以浮動，浮動元素會生成一個塊級框，不論它本身是何種元素。因此，沒有必要為浮動元素設置 display：block。

如果浮動非替換元素，則要指定一個明確的 width，否則它們會盡可能的窄。

什么叫替換元素 ？根據元素本身的特點定義的，?(X)HTML中的 img、input、textarea、select、object 都是替換元素，這些元素都沒有實際的內容。?(X)HTML 的大多數元素是不可替換元素，他們將內容直接告訴瀏覽器，將其顯示出來。

display

display 屬性取值：none、inline、inline-block、block、table 相關屬性值、inherit。

display 屬性規定元素應該生成的框的類型。文檔內任何元素都是框，塊框或行內框。

display：none 和 visiability：hidden 都可以隱藏 div，區別有點像 absolute 和 relative，前者不占據文檔的空間，后者還是占據文檔的位置。

display：inline 和 block，又叫行內元素和塊級元素。

表現出來的區別就是 block 獨占一行，在瀏覽器中通常垂直布局，可以用 margin 來控制塊級元素之間的間距（存在 margin 合并的問題，只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。）；
而 inline 以水平方式布局，垂直方向的 margin 和 padding 都是無效的，大小跟內容一樣，且無法設置寬高。
inline 就像塑料袋，內容怎么樣，就長得怎么樣；block 就像盒子，有固定的寬和高。

inline-block 就介于兩者之間。

table 相關的屬性值可以用來垂直居中，效果一般。

flex

定位機制

上面三個屬性都屬于 CSS 定位屬性。CSS 三種基本的定位機制：普通流、浮動、絕對定位。

css3 動畫效果屬性有哪些 ?

animation-name：規定需要綁定到選擇器的 keyframe 名稱。。

animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。

animation-timing-function：規定動畫的速度曲線。

animation-delay：規定在動畫開始之前的延遲。

animation-iteration-count：規定動畫應該播放的次數。

animation-direction：規定是否應該輪流反向播放動畫。

canvas 與 svg 的區別 ？

Canvas 是基于像素的即時模式圖形系統，最適合較小的表面或較大數量的對象，Canvas 不支持鼠標鍵盤等事件。

SVG 是基于形狀的保留模式圖形系統，更加適合較大的表面或較小數量的對象。

Canvas 和 SVG 在修改方式上還存在著不同。繪制 Canvas 對象后，不能使用腳本和 CSS 對它進行修改。因為 SVG 對象是文檔對象模型的一部分，所以可以隨時使用腳本和 CSS 修改它們。

現在對兩種技術做對比歸納如下：

Canvas

1) 依賴分辨率
2) 不支持事件處理器
3) 弱的文本渲染能力
4) 能夠以 .png 或 .jpg 格式保存結果圖像
5) 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

SVG

1) 不依賴分辨率
2) 支持事件處理器
3) 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
4) 復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
5) 不適合游戲應用

px 和 em 的區別 ？

px 像素（Pixel）。相對長度單位。像素 px 是相對于顯示器屏幕分辨率而言的。(引自CSS2.0手冊)

em 是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。(引自CSS2.0手冊)

任意瀏覽器的默認字體高都是 16px。所有未經調整的瀏覽器都符合：1em = 16px。

那么12px = 0.75em,10px = 0.625em。為了簡化 font-size 的換算，需要在 css 中的 body 選擇器中聲明 Font-size = 62.5%，這就使 em 值變為 16px*62.5% = 10px, 這樣 12px = 1.2em, 10px = 1em, 也就是說只需要將你的原來的 px 數值除以 10，然后換上 em 作為單位就行了。

會不會用 ps 扣圖，png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。如何優化圖像、圖像格式的區別 ?

JPG 的特性

支持攝影圖像或寫實圖像的高級壓縮，并且可利用壓縮比例控制圖像文件大小。

有損壓縮會使圖像數據質量下降，并且在編輯和重新保存 JPG 格式圖像時，這種下降損失會累積。

JPG 不適用于所含顏色很少、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片。

PNG 的特性

能在保證最不失真的情況下盡可能壓縮圖像文件的大小。

PNG 用來存儲灰度圖像時，灰度圖像的深度可多到 16 位，存儲彩色圖像時，彩色圖像的深度可多到 48 位，并且還可存儲多到 16 位的 α 通道數據。

對于需要高保真的較復雜的圖像，PNG 雖然能無損壓縮，但圖片文件較大，不適合應用在 Web 頁面上。

另外還有一個原則就是用于頁面結構的基本視覺元素，如容器的背景、按鈕、導航的背景等應該盡量用 PNG 格式進行存儲，這樣才能更好的保證設計品質。而其他一些內容元素，如廣告 Banner、商品圖片 等對質量要求不是特別苛刻的，則可以用 JPG 去進行存儲從而降低文件大小。

GIF格式特點
?

透明性:?Gif 是一種布爾透明類型，既它可以是全透明，也可以是全不透明，但是它并沒有半透明（alpha 透明）。?

動畫：Gif 這種格式支持動畫。?

無損耗性：Gif 是一種無損耗的圖像格式，這也意味著你可以對 gif 圖片做任何操作也不會使得圖像質量產生損耗。?

水平掃描：Gif 是使用了一種叫作 LZW 的算法進行壓縮的，當壓縮 gif 的過程中，像素是由上到下水平壓縮的，這也意味著同等條件下，橫向的 gif 圖片比豎向的 gif 圖片更加小。

例如 50010 的圖片比 10500 的圖片更加小。
間隔漸進顯示：Gif 支持可選擇性的間隔漸進顯示?

由以上特點看出只有 256 種顏色的 gif 圖片不適合作為照片，它適合做對顏色要求不高的圖形。

我們知道可以以外鏈的方式引入 CSS 文件，請談談外鏈引入 CSS 有哪些方式，這些方式的性能有區別嗎 ？

CSS 的引入方式最常用的有三種

第一：外鏈式

這種方法可以說是現在占統治地位的引入方法。

如同 IE 與瀏覽器。這也是最能體現 CSS 特點的方法；

最能體現 DIV + CSS 中的內容離的思想，也最易改版維護，代碼看起來也是最美觀的一種。

第二：內部樣式表

這種方法的使用情況要少的多，最長見得就是訪問量大的門戶網站。或者訪問量較大的企業網站的首頁。

與第一種方法比起來，優弊端也明顯。

優點：速度快，所有的 CSS 控制都是針對本頁面標簽的，沒有多余的 CSS 命令；再者不用外鏈 CSS 文件。直接在文檔中讀取樣式。

缺點：就是改版麻煩些，單個頁面顯得臃腫，CSS 不能被其他 HTML 引用造成代碼量相對較多，維護也麻煩些采用這種方法的公司大多有錢，對他們來說用戶量是關鍵，他們不缺人進行復雜的維護工作。

第三：行內樣式

認為 HTML 里不能出現 CSS 命令。其實有時候沒有什么大不了。比如通用性差，效果特殊，使用 CSS 命令較少，并且不常改動的地方，使用這種方法反而是很好的選擇。

第四、@import 引入方式

CSS Sprite 是什么，談談這個技術的優缺點。

加速的關鍵，不是降低重量，而是減少個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無計算機統一都按 byte 計算。客戶端每顯示一張圖片都會向服務器發送請求。所以，圖片越多請求次數越多，造成延遲的可越大。

利用 CSS Sprites 能很好地減少了網頁的 http 請求，從而大大的提高了頁面的性能，這也是 CSS Sprites 的優點，也是其被廣泛傳播和應用的主要原因；

CSS Sprites 能減少圖片的字節，曾經比較過多次 3 張圖片合并成 1 張圖片的字節總是小于這 3 張圖片的和。

解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素名，從而提高了網頁的制作效率。

更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起方便。

誠然 CSS Sprites 是如此的強大，但是也存在一些不可忽視的缺點，如下：

在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內不不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容背景斷裂；

CSS Sprites 在開發的時候比較麻煩，你要通過 photoshop 或其他工具測量計算每一個背景單元的精確位是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用 RIA 開發了一個 CSS Sprites 樣式生成工具，雖然些使用上的不靈活，但是已經比 photoshop 測量來的方便多了，而且樣式直接生成，復制，拷貝就 OK！

CSS Sprites 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的好不要動，這樣避免改動更多的 css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字加了，還要改動 css。

CSS Sprites 非常值得學習和應用，特別是頁面有一堆 ico（圖標）。總之很多時候大家要權衡一下再決定是不是應用 CSS Sprites。

以 CSS3 標準定義一個 webkit 內核瀏覽器識別的圓角（尺寸隨意）

-moz-border-radius: 10px; 
-webkit-border-radius: 10px;
 border-radius: 10px;。

優先級算法如何計算？內聯和 important 哪個優先級高 ？

優先級就近原則，樣式定義最近者為準

載入樣式以最后載入的定位為準

優先級為 !important > [ id > class > tag ]

Important 比內聯優先級高

css 的基本語句構成是 ？

回答：選擇器、屬性和屬性值。

如果讓你來制作一個訪問量很高的大型網站，你會如何來管理所有 CSS 文件、JS 與圖片？

回答：涉及到人手、分工、同步；

先期團隊必須確定好全局樣式（globe.css），編碼模式 (utf-8) 等

編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；

標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；

頁面進行標注（例如頁面模塊開始和結束）；

CSS 跟 HTML 分文件夾并行存放，命名都得統一（例如 style.css）

JS 分文件夾存放，命名以該 JS 功能為準

圖片采用整合的 png8 格式文件使用，盡量整合在一起使用，方便將來的管理。

CSS 選擇符有哪些 ？哪些屬性可以繼承 ？優先級算法如何計算 ？新增偽類有那些 ？

CSS 選擇符

id 選擇器（ #myid）

類選擇器（.myclassname）

標簽選擇器（div, h1, p）

相鄰選擇器（h1 + p）

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（ * ）

屬性選擇器（a[rel = "external"]）

偽類選擇器（a: hover, li: nth - child）

可繼承的樣式

font-size，font-family，color，ul，li，dl，dd，dt；

不可繼承的樣式

border padding margin width height
事實上，寬度也不是繼承的，而是如果你不指定寬度，那么它就是 100%。由于你子 DIV 并沒有指定寬度，那它就是 100%，也就是與父 DIV 同寬，但這與繼承無關，高度自然也沒有繼承一說。

優先級算法

優先級就近原則，同權重情況下樣式定義最近者為準;

載入樣式以最后載入的定位為準;

優先級為: !important > id > class > tag , important 比 內聯優先級高

CSS3 新增偽類舉例

:root 選擇文檔的根元素，等同于 html 元素

:empty 選擇沒有子元素的元素

:target 選取當前活動的目標元素

:not(selector) 選擇除 selector 元素意外的元素

:enabled 選擇可用的表單元素

:disabled 選擇禁用的表單元素

:checked 選擇被選中的表單元素

:after 選擇器在被選元素的內容后面插入內容

:before 選擇器在被選元素的內容前面插入內容

:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第 n

:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第 n，從后向前數

:nth-child(odd) 奇數

:nth-child(even) 偶數

:nth-child(3n+1)

:first-child

:last-child

:only-child

:nth-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第 n

:nth-last-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第 n，從后向前數

:nth-of-type(odd)

:nth-of-type(even)

:nth-of-type(3n+1)

:first-of-type

:last-of-type

:only-of-type

::selection 選擇被用戶選取的元素部分

:first-line 選擇元素中的第一行

:first-letter 選擇元素中的第一個字符

CSS3 有哪些新特性 ?

CSS3 實現圓角（border-radius:8px）

陰影（box-shadow:10px）

對文字加特效（text-shadow）

線性漸變（gradient）

旋轉、縮放、定位、傾斜

 transform: rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); 

增加了更多的 CSS 選擇器

多背景 rgba

一個滿屏 品字布局 如何設計 ？

第一種方式

效果如下：?

為什么要初始化 CSS 樣式 ?

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。
初始化樣式會對 SEO 有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

初始化 CSS 樣式例子

html,
body {
  padding: 0; 
  margin: 0;
} 
...

collapse、overflow、float 這些特性相互疊加后會怎么樣？

margin collapse 我覺得這里的意思應該是 Collapsing margins，即外邊距折疊，指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距。

其中所說的 margin 毗鄰，可以歸結為以下兩點：

這兩個或多個外邊距沒有被非空內容、padding、border 或 clear 分隔開。

這些 margin 都處于普通流中。

兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會折疊。

浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊.

創建了塊級格式化上下文的元素，不和它的子元素發生 margin 折疊

請解釋一下CSS3 的 Flexbox（彈性盒布局模型），以及適用場景 ？

http://www.ruanyifeng.com/blo...

任何一個容器都可以指定為 Flex 布局，行內元素也可以使用 Flex 布局。

注意：設為 Flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。

flex 布局最常用的是什么場景 ？

一般實現垂直居中是一件很麻煩的事，但 flex 布局輕松解決。

.demo {
  display: flex; ? ? ? ? ? ?
  justify-content: center; ? ? ? ? ? ? ? ? ? ?
  align-items: center;
}

用純 CSS 創建一個三角形的原理是什么？

把上、左、右三條邊隱藏掉（顏色設為 transparent）

#demo {
?width: 0;
?height: 0;
?border-width: 20px;
?border-style: solid;
?border-color: transparent transparent red transparent;
}

absolute 的 containing block(容器塊) 計算方式跟正常流有什么不同 ？

無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：

若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin，border 外的區域) 的最小矩形；

否則，則由這個祖先元素的 padding box 構成。

如果都找不到，則為 initial containing block。

補充：

static / relative：簡單說就是它的父元素的內容框（即去掉 padding 的部分）

absolute: 向上找最近的定位為 absolute / relative 的元素

fixed: 它的 containing block 一律為根元素(html / body)，根元素也是 initial containing block

對 BFC 規范(塊級格式化上下文：blockformatting context)的理解 ？

W3C CSS 2.1 規范中的一個概念，它是一個獨立容器，決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。

一個頁面是由很多個 Box 組成的，元素的類型和 display 屬性，決定了這個 Box 的類型。

不同類型的 Box，會參與不同的 Formatting Context（決定如何渲染文檔的容器），因此 Box 內的元素會以不同的方式渲染，也就是說 BFC 內部的元素和外部的元素不會互相影響。

用 position: absolute 跟用 float 有什么區別嗎 ？

都是脫離標準流，只是 position: absolute 定位用的時候，位置可以給的更精確(想放哪就放哪)，而 float 用的更簡潔，向右，左，兩個方向浮動，用起來就一句代碼。

還有就是 position: absolute 不管在哪個標簽里，都可以定位到任意位置，畢竟 top，left，bottom，right 都可以給正值或負值；

float 只是向左或向右浮動，不如 position: absolute 靈活，浮動后再想改變位置就要加各種 margin，padding 之類的通過間距的改變來改變位置，我自身覺得這樣的話用起來不方便，也不太好。

但在菜單欄，或者一些圖標的橫向排列時，用起來特別方便，一個 float 就解決了，而且每個元素之間不會有任何間距(所以可以用 float 消除元素間的距離)；

svg 與 convas 的區別 ？

svg 繪制出來的每一個圖形的元素都是獨立的 DOM 節點，能夠方便的綁定事件或用來修改，而 canvas 輸出的是一整幅畫布；

svg 輸出的圖形是矢量圖形，后期可以修改參數來自由放大縮小，不會是真和鋸齒。而 canvas 輸出標量畫布，就像一張圖片一樣，放大會失真或者鋸齒。

何時應當時用 padding 和 margin ？

何時應當使用 margin

需要在 border 外側添加空白時。

空白處不需要背景（色）時。

上下相連的兩個盒子之間的空白，需要相互抵消時。

如 15px + 20px 的 margin，將得到 20px 的空白。

何時應當時用 padding

需要在 border 內測添加空白時。

空白處需要背景（色）時。

上下相連的兩個盒子之間的空白，希望等于兩者之和時。

如 15px + 20px 的 padding，將得到 35px 的空白。

個人認為：margin 是用來隔開元素與元素的間距；padding 是用來隔開元素與內容的間隔，讓內容（文字）與（包裹）元素之間有一段 呼吸距離。

文字在超出長度時，如何實現用省略號代替 ? 超長長度的文字在省略顯示后，如何在鼠標懸停時，以懸浮框的形式顯示出全部信息 ?

注意：設置 width，overflow: hidden, white-space: nowrap (規定段落中的文本不進行換行), text-overflow: ellipsis，四個屬性缺一不可。這種寫法在所有的瀏覽器中都能正常顯示。

CSS 里的 visibility 屬性有個 collapse 屬性值 ？在不同瀏覽器下有什么區別 ？

Collapse

當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局，被行或列占據的空間會留給其他內容使用。

如果此值被用在其他的元素上，會呈現為 hidden。

當一個元素的 visibility 屬性被設置成 collapse 值后，對于一般的元素，它的表現跟 hidden 是一樣的。

chrome中，使用 collapse 值和使用 hidden 沒有區別。

firefox，opera 和 IE，使用 collapse 值和使用 display：none 沒有什么區別。

position 跟 display、overflow、float 這些特性相互疊加后會怎么樣 ？

display 屬性規定元素應該生成的框的類型；

position 屬性規定元素的定位類型；

float 屬性是一種布局方式，定義元素在哪個方向浮動。

類似于優先級機制：position：absolute / fixed 優先級最高，有他們在時，float 不起作用，display 值需要調整。float 或者 absolute 定位的元素，只能是塊元素或表格。

對 BFC 規范(塊級格式化上下文：block formatting context) 的理解 ？

BFC 規定了內部的 Block Box 如何布局。

定位方案：

內部的 Box 會在垂直方向上一個接一個放置。

Box 垂直方向的距離由 margin 決定，屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊。

每個元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸。

BFC 的區域不會與 float box 重疊。

BFC 是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。

計算 BFC 的高度時，浮動元素也會參與計算。

滿足下列條件之一就可觸發 BFC：

1、根元素，即 html

2、float 的值不為 none（默認）

3、overflow 的值不為 visible（默認）

4、display 的值為 inline-block、table-cell、table-caption

5、position 的值為 absolute 或 fixed

瀏覽器是怎樣解析 CSS 選擇器的 ？

CSS 選擇器的解析是從右向左解析的。

若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。

若從右向左匹配，先找到所有的最右節點，對于每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。

兩種匹配規則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在了失敗的查找上面。

而在 CSS 解析完畢后，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。

在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來確定生成怎樣的 Render Tree。

元素豎向的百分比設定是相對于容器的高度嗎 ？

當按百分比設定一個元素的寬度時，它是相對于父容器的寬度計算的。

全屏滾動的原理是什么 ？用到了 CSS 的哪些屬性 ？

原理

有點類似于輪播，整體的元素一直排列下去，假設有 5 個需要展示的全屏頁面，那么高度是 500%，只是展示 100%，剩下的可以通過 transform 進行 y 軸定位，也可以通過
margin-top 實現。

overflow：hidden；transition：all 1000ms ease；

什么是響應式設計 ？響應式設計的基本原理是什么 ？如何兼容低版本的 IE ？

響應式網站設計( Responsive Web design ) 是一個網站能夠兼容多個終端，而不是為每一個終端做一個特定的版本。

基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。

頁面頭部必須有 meta 聲明的 viewport。

視差滾動效果 ？

視差滾動（Parallax Scrolling）通過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢 來創建出令人驚嘆的 3D 效果。

CSS3 實現。

優點：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器

jQuery 實現。

通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。優點：能兼容到各個版本的，效果可控性好。缺點：開發起來對制作者要求高。

插件實現方式。

例如：parallax-scrolling，兼容性十分好。

::before 和 :after 中雙冒號和單冒號有什么區別 ？解釋一下這 2 個偽元素的作用

單冒號 (:) 用于 CSS3 偽類，雙冒號 (::) 用于 CSS3 偽元素。

::before 就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。并不存在于 dom 之中，只存在在頁面之中。

:before 和 :after 這兩個偽元素，是在 CSS2.1 里新出現的。
起初，偽元素的前綴使用的是單冒號語法，但隨著 Web 的進化，在 CSS3 的規范里，偽元素的語法被修改成使用雙冒號，成為 ::before、 ::after 。

怎么讓 Chrome 支持小于 12px 的文字 ？

p {
  font-size: 10px;
  -webkit-transform: scale(0.8);  // 0.8 是縮放比例
}?

讓頁面里的字體變清晰，變細用 CSS 怎么做 ？

-webkit-font-smoothing 在 window 系統下沒有起作用，但是在 IOS 設備上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。

如果需要手動寫動畫，你認為最小時間間隔是多久，為什么 ？

多數顯示器默認頻率是 60Hz，即 1 秒刷新 60 次，所以理論上最小間隔為：1/60＊1000ms ＝ 16.7ms。

有一個高度自適應的 div，里面有兩個 div，一個高度 100px，如何讓另一個填滿剩下的高度 ？

外層 div 使用 position：relative；

高度要求自適應的 div 使用 position: absolute; top: 100px; bottom: 0; left: 0

png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp ？

png 是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式。

優點是：壓縮比高，色彩好。 大多數地方都可以用。

jpg 是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在 www 上，被用來儲存和傳輸照片的格式。

gif 是一種位圖文件格式，以 8 位色重現真色彩的圖像。可以實現動畫效果。

webp 格式是谷歌在 2010 年推出的圖片格式，壓縮率只有 jpg 的 2/3，大小比 png 小了 45%。缺點是壓縮的時間更久了，兼容性不好，目前谷歌和 opera 支持。

style 標簽寫在 body 后與 body 前有什么區別？

頁面加載自上而下，當然是先加載樣式。

寫在 body 標簽后，由于瀏覽器以逐行方式對 HTML 文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標簽）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在 windows 的 IE 下可能會出現 FOUC 現象（即樣式失效導致的頁面閃爍問題）

闡述一下CSS Sprites

將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用 CSS 的 background-image，background-repeat，background-position 的組合進行背景定位。

利用 CSS Sprites 能很好地減少網頁的 http 請求，從而大大的提高頁面的性能；
CSS Sprites 能減少圖片的字節。

用 css 實現左側寬度自適應，右側固定寬度 ？

1、標準瀏覽器的方法

當然，以不折騰人為標準的 w3c 標準早就為我們提供了制作這種自適應寬度的標準方法。

把 container 設為 display: table 并指定寬度 100%；

然后把 main + sidebar 設為 display: table-cell;

然后只給 sidebar 指定一個寬度，那么 main 的寬度就變成自適應了。

代碼很少，而且不會有額外標簽。不過這是 IE7 及以下都無效的方法。

.container {
    display: table;
    width: 100%;
}
.main {
    display: table-cell;
}
.sidebar {
    display: table-cell;
    width: 300px;
}

2、固定區域浮動，自適應區域不設置寬度但設置 margin

.container {
    overflow: hidden;
    *zoom: 1;
}
.sidebar {
    float: right;
    width: 300px;
    background: #333;
}
.main {
    margin-right: 320px;
    background: #666;
}
.footer {
    margin-top: 20px;
    background: #ccc;
}

其中，sidebar 讓它浮動，并設置了一個寬度；而 main 沒有設置寬度。

大家要注意 html 中必須使用 div 標簽，不要妄圖使用什么 p 標簽來達到目的。因為 div 有個默認屬性，即如果不設置寬度，那它會自動填滿它的父標簽的寬度。這里的 main 就是例子。

當然我們不能讓它填滿了，填滿了它就不能和 sidebar 保持同一行了。我們給它設置一個 margin。由于 sidebar 在右邊，所以我們設置 main 的 margin-right 值，值比 sidebar 的寬度大一點點——以便區分它們的范圍，例子中是 320。

假設 main 的默認寬度是 100%，那么它設置了 margin 后，它的寬度就變成了 100% - 320，此時 main 發現自己的寬度可以與 sidebar 擠在同一行了，于是它就上來了。
而寬度 100% 是相對于它的父標簽來的，如果我們改變了它父標簽的寬度，那 main 的寬度也就會變——比如我們把瀏覽器窗口縮小，那 container 的寬度就會變小，而 main 的寬度也就變小，但它的實際寬度 100% - 320 始終是不會變的。

這個方法看起來很完美，只要我們記得清除浮動(這里我用了最簡單的方法)，那 footer 也不會錯位。而且無論 main 和 sidebar 誰更長，都不會對布局造成影響。

但實際上這個方法有個很老火的限制——html 中 sidebar 必須在 main 之前！
但我需要 sidebar 在 main 之后！因為我的 main 里面才是網頁的主要內容，我不想主要內容反而排在次要內容后面。
但如果 sidebar 在 main 之后，那上面的一切都會化為泡影。

3、固定區域使用定位，自適應區域不設置寬度，但設置 margin

.container {
    position: relative;
}
.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    background: #333;
}
.main {
    margin-right: 320px;
    background: #666;
}

咦，好像不對，footer 怎么還是在那兒呢？怎么沒有自動往下走呢？footer 說——我不給絕對主義者讓位！
其實這與 footer 無關，而是因為 container 對 sidebar 的無視造成的——你再長，我還是沒感覺。
看來這種定位方式只能滿足 sidebar 自己，但對它的兄弟們卻毫無益處。

4、左邊浮動，右邊 overflow: hidden;

*{ margin:0; padding: 0; }
html,body{
   height: 100%;/*高度百分百顯示*/
}
#left {
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right {
    height: 100%;
    overflow: hidden;
    background-color: #eee;
}

第二種方法，我利用的是創建一個新的 BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。

BFC 就是一個相對獨立的布局環境，它內部元素的布局不受外面布局的影響。
它可以通過以下任何一種方式來創建：?

float 的值不為 none?

position 的值不為 static 或者 relative?

display 的值為 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一個?overflow 的值不為?visible

關于 BFC，在 w3c 里是這樣描述的：在 BFC 中，每個盒子的左外邊框緊挨著 包含塊 的 左邊框 （從右到左的格式化時，則為右邊框緊挨）。
即使在浮動里也是這樣的（盡管一個包含塊的邊框會因為浮動而萎縮），除非這個包含塊的內部創建了一個新的 BFC。
這樣，當我們給右側的元素多帶帶創建一個 BFC 時，它將不會緊貼在包含塊的左邊框，而是緊貼在左元素的右邊框。

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

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

影響

浮動會導致父元素無法被撐開，影響與父元素同級的元素。

與該浮動元素同級的非浮動元素，如果是塊級元素，會移動到該元素下方，而塊級元素內部的行內元素會環繞浮動元素；而如果是內聯元素則會環繞該浮動元素。

與該元素同級的浮動元素，對于同一方向的浮動元素(同級)，兩個元素將會跟在碰到的浮動元素后面；而對于不同方向的浮動元素，在寬度足夠時，將分別浮動向不同方向，在寬度不同是將導致一方換行(換行與 HTML 書寫順序有關，后邊的將會浮動到下一行)。

浮動元素將被視作為塊元素。

而浮動元素對于其父元素之外的元素，如果是非浮動元素，則相當于忽視該浮動元素，如果是浮動元素，則相當于同級的浮動元素。

而常用的清除浮動的方法，則如使用空標簽，overflow，偽元素等。

在使用基于浮動設計的 CSS 框架時，自會提供清除的方法，個人并不習慣使用浮動進行布局。

對 CSS Grid 布局的使用

5 分鐘學會 CSS Grid 布局

rem、em、px、vh 與 vw 的區別 ？

一、 rem 的特點

rem 的大小是根據 html 根目錄下的字體大小進行計算的。

當我們改變根目錄下的字體大小的時候，下面字體都改變。

rem 不僅可以設置字體的大小，也可以設置元素寬、高等屬性。

rem 是 CSS3 新增的一個相對單位（root em，根em），這個單位與 em 區別在于使用 rem 為元素設定字體大小時，仍然是相對大小，但相對的只是 HTML 根元素。

這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。
目前，除了 IE8 及更早版本外，所有瀏覽器均已支持 rem。
對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用 rem 設定的字體大小。

二、px 特點

px 像素（Pixel）。相對長度單位。像素 px 是相對于顯示器屏幕分辨率而言的。

三、em 特點?

em 的值并不是固定的；

em 會繼承父級元素的字體大小。

em 是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。

任意瀏覽器的默認字體高都是 16px。

所有未經調整的瀏覽器一般都符合: 1em = 16px。那么 12px = 0.75em，10px = 0.625em。
為了簡化 font-size 的換算，需要在 css 中的 body 選擇器中聲明 Fontsize = 62.5%，這就使 em 值變為 16px*62.5% = 10px, 這樣 12px = 1.2em, 10px = 1em, 也就是說只需要將你的原來的 px 數值除以 10，然后換上 em 作為單位就行了。

四、vh 與 vw

視口

在桌面端，指的是瀏覽器的可視區域；

在移動端，它涉及 3個 視口：Layout Viewport（布局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。

視口單位中的 “視口”，桌面端指的是瀏覽器的可視區域；移動端指的就是 Viewport 中的 Layout Viewport。

vh / vw 與 %

單位 ： 解釋

vw ：1vw = 視口寬度的 1%

vh ：1vh = 視口高度的 1%

vmin ：選取 vw 和 vh 中最小的那個

vmax ：選取 vw 和 vh 中最大的那個

比如：瀏覽器視口尺寸為 370px，那么 1vw = 370px * 1% = 6.5px (瀏覽器會四舍五入向下取 7)

vh / vw 與 % 區別

單位 ：解釋

% ：元素的祖先元素

vh / vw ：視口的尺寸

不過由于 vw 和 vh 是 css3 才支持的長度單位，所以在不支持 css3 的瀏覽器中是無效的。

什么叫優雅降級和漸進增強 ？

漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

區別

優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給；

漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要；

降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

前端硬核面試專題的完整版在此：前端硬核面試專題，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 數據結構與算法 + Git 。

如果覺得本文還不錯，記得給個 star ， 你的 star 是我持續更新的動力！。