摘要：前言本文講解道前端面試的的內(nèi)容。文章原文地址前端硬核面試專題之問。前端硬核面試專題的完整版在此前端硬核面試專題，包含數(shù)據(jù)結(jié)構(gòu)與算法。

本文講解 55 道前端面試的 CSS 的內(nèi)容。

復(fù)習(xí)前端面試的知識，是為了鞏固前端的基礎(chǔ)知識，最重要的還是平時的積累！

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

筆者技術(shù)博客首發(fā)地址 GitHub，歡迎關(guān)注。

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

前端硬核面試專題的完整版在此：前端硬核面試專題，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 數(shù)據(jù)結(jié)構(gòu)與算法 + Git 。

盒子模型的理解 ?

標(biāo)準(zhǔn)模式和混雜模式（IE）。

在標(biāo)準(zhǔn)模式下瀏覽器按照規(guī)范呈現(xiàn)頁面；

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

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

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

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

一個盒子模型的中：

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

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

如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域 ？

1、map+area 或者 svg

2、border-radius

3、純 js 實現(xiàn)，需要求一個點在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等

實現(xiàn)不使用 border 畫出 1px 高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。

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

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

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

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

作用

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

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

頁面導(dǎo)入樣式時，使用 link 和 @import 有什么區(qū)別 ？

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

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

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

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

總之，link 要優(yōu)于 @import。

常見兼容性問題？

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

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 樣式就不出現(xiàn)了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了，解決方法是改變 CSS 屬性的排列順序:

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

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

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

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

清除浮動的方式

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

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

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

父級 div 也一起浮動?。

父級 div 定義 display: table?。

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

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

總結(jié)：比較好的是倒數(shù)第 2 種方式，簡潔方便。

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

一、水平居中?

（1）行內(nèi)元素解決方案

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

.parent {
    text-align: center;
}

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

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

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

.parent {
    text-align:center;
}

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

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

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

二、垂直居中

（1）單行的行內(nèi)元素解決方案

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

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

（2）多行的行內(nèi)元素解決方案組合

使用 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

這是一種不常見的居中方法，可自適應(yīng)，比方案 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;  /* 設(shè)置margin-left / margin-top 為自身高度的一半 */
    margin-left: -75px;
}

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

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

（4）使用 flex 布局實現(xiàn)

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

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

position

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

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

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

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

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

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

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

position：inherit。

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

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

float

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

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

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

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

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

display

display 屬性取值：none、inline、inline-block、block、table 相關(guān)屬性值、inherit。

display 屬性規(guī)定元素應(yīng)該生成的框的類型。文檔內(nèi)任何元素都是框，塊框或行內(nèi)框。

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

display：inline 和 block，又叫行內(nèi)元素和塊級元素。

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

inline-block 就介于兩者之間。

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

flex

定位機制

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

css3 動畫效果屬性有哪些 ?

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

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

animation-timing-function：規(guī)定動畫的速度曲線。

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

animation-iteration-count：規(guī)定動畫應(yīng)該播放的次數(shù)。

animation-direction：規(guī)定是否應(yīng)該輪流反向播放動畫。

canvas 與 svg 的區(qū)別 ？

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

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

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

現(xiàn)在對兩種技術(shù)做對比歸納如下：

Canvas

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

SVG

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

px 和 em 的區(qū)別 ？

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

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

任意瀏覽器的默認字體高都是 16px。所有未經(jīng)調(diào)整的瀏覽器都符合：1em = 16px。

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

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

JPG 的特性

支持攝影圖像或?qū)憣崍D像的高級壓縮，并且可利用壓縮比例控制圖像文件大小。

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

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

PNG 的特性

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

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

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

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

GIF格式特點
?

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

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

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

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

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

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

我們知道可以以外鏈的方式引入 CSS 文件，請談?wù)勍怄溡?CSS 有哪些方式，這些方式的性能有區(qū)別嗎 ？

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

第一：外鏈?zhǔn)?/p>

這種方法可以說是現(xiàn)在占統(tǒng)治地位的引入方法。

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

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

第二：內(nèi)部樣式表

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

與第一種方法比起來，優(yōu)弊端也明顯。

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

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

第三：行內(nèi)樣式

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

第四、@import 引入方式

CSS Sprite 是什么，談?wù)勥@個技術(shù)的優(yōu)缺點。

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

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

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

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

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

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

在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)不不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，你的圖片如果不夠?qū)挘苋荼尘皵嗔眩?/p>

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

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

CSS Sprites 非常值得學(xué)習(xí)和應(yīng)用，特別是頁面有一堆 ico（圖標(biāo)）。總之很多時候大家要權(quán)衡一下再決定是不是應(yīng)用 CSS Sprites。

以 CSS3 標(biāo)準(zhǔn)定義一個 webkit 內(nèi)核瀏覽器識別的圓角（尺寸隨意）

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

優(yōu)先級算法如何計算？內(nèi)聯(lián)和 important 哪個優(yōu)先級高 ？

優(yōu)先級就近原則，樣式定義最近者為準(zhǔn)

載入樣式以最后載入的定位為準(zhǔn)

優(yōu)先級為 !important > [ id > class > tag ]

Important 比內(nèi)聯(lián)優(yōu)先級高

css 的基本語句構(gòu)成是 ？

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

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

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

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

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

標(biāo)注樣式編寫人，各模塊都及時標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；

頁面進行標(biāo)注（例如頁面模塊開始和結(jié)束）；

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

JS 分文件夾存放，命名以該 JS 功能為準(zhǔn)

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

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

CSS 選擇符

id 選擇器（ #myid）

類選擇器（.myclassname）

標(biāo)簽選擇器（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 同寬，但這與繼承無關(guān)，高度自然也沒有繼承一說。

優(yōu)先級算法

優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);

載入樣式以最后載入的定位為準(zhǔn);

優(yōu)先級為: !important > id > class > tag , important 比 內(nèi)聯(lián)優(yōu)先級高

CSS3 新增偽類舉例

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

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

:target 選取當(dāng)前活動的目標(biāo)元素

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

:enabled 選擇可用的表單元素

:disabled 選擇禁用的表單元素

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

:after 選擇器在被選元素的內(nèi)容后面插入內(nèi)容

:before 選擇器在被選元素的內(nèi)容前面插入內(nèi)容

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

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

:nth-child(odd) 奇數(shù)

:nth-child(even) 偶數(shù)

:nth-child(3n+1)

:first-child

:last-child

:only-child

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

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

: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 實現(xiàn)圓角（border-radius:8px）

陰影（box-shadow:10px）

對文字加特效（text-shadow）

線性漸變（gradient）

旋轉(zhuǎn)、縮放、定位、傾斜

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

增加了更多的 CSS 選擇器

多背景 rgba

一個滿屏 品字布局 如何設(shè)計 ？

第一種方式

效果如下：?

為什么要初始化 CSS 樣式 ?

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

初始化 CSS 樣式例子

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

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

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

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

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

這些 margin 都處于普通流中。

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

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

創(chuàng)建了塊級格式化上下文的元素，不和它的子元素發(fā)生 margin 折疊

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

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

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

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

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

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

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

用純 CSS 創(chuàng)建一個三角形的原理是什么？

把上、左、右三條邊隱藏掉（顏色設(shè)為 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 外的區(qū)域) 的最小矩形；

否則，則由這個祖先元素的 padding box 構(gòu)成。

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

補充：

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

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

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

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

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

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

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

用 position: absolute 跟用 float 有什么區(qū)別嗎 ？

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

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

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

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

svg 與 convas 的區(qū)別 ？

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

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

何時應(yīng)當(dāng)時用 padding 和 margin ？

何時應(yīng)當(dāng)使用 margin

需要在 border 外側(cè)添加空白時。

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

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

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

何時應(yīng)當(dāng)時用 padding

需要在 border 內(nèi)測添加空白時。

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

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

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

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

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

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

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

Collapse

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

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

當(dāng)一個元素的 visibility 屬性被設(shè)置成 collapse 值后，對于一般的元素，它的表現(xiàn)跟 hidden 是一樣的。

chrome中，使用 collapse 值和使用 hidden 沒有區(qū)別。

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

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

display 屬性規(guī)定元素應(yīng)該生成的框的類型；

position 屬性規(guī)定元素的定位類型；

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

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

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

BFC 規(guī)定了內(nèi)部的 Block Box 如何布局。

定位方案：

內(nèi)部的 Box 會在垂直方向上一個接一個放置。

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

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

BFC 的區(qū)域不會與 float box 重疊。

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

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

滿足下列條件之一就可觸發(fā) BFC：

1、根元素，即 html

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

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

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

5、position 的值為 absolute 或 fixed

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

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

若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則，需要進行回溯，會損失很多性能。

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

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

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

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

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

當(dāng)按百分比設(shè)定一個元素的寬度時，它是相對于父容器的寬度計算的。

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

原理

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

overflow：hidden；transition：all 1000ms ease；

什么是響應(yīng)式設(shè)計 ？響應(yīng)式設(shè)計的基本原理是什么 ？如何兼容低版本的 IE ？

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

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

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

視差滾動效果 ？

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

CSS3 實現(xiàn)。

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

jQuery 實現(xiàn)。

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

插件實現(xiàn)方式。

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

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

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

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

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

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

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

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

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

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

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

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

外層 div 使用 position：relative；

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

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

png 是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無損數(shù)據(jù)壓縮位圖文件格式。

優(yōu)點是：壓縮比高，色彩好。 大多數(shù)地方都可以用。

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

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

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

style 標(biāo)簽寫在 body 后與 body 前有什么區(qū)別？

頁面加載自上而下，當(dāng)然是先加載樣式。

寫在 body 標(biāo)簽后，由于瀏覽器以逐行方式對 HTML 文檔進行解析，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在 windows 的 IE 下可能會出現(xiàn) FOUC 現(xiàn)象（即樣式失效導(dǎo)致的頁面閃爍問題）

闡述一下CSS Sprites

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

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

用 css 實現(xiàn)左側(cè)寬度自適應(yīng)，右側(cè)固定寬度 ？

1、標(biāo)準(zhǔn)瀏覽器的方法

當(dāng)然，以不折騰人為標(biāo)準(zhǔn)的 w3c 標(biāo)準(zhǔn)早就為我們提供了制作這種自適應(yīng)寬度的標(biāo)準(zhǔn)方法。

把 container 設(shè)為 display: table 并指定寬度 100%；

然后把 main + sidebar 設(shè)為 display: table-cell;

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

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

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

2、固定區(qū)域浮動，自適應(yīng)區(qū)域不設(shè)置寬度但設(shè)置 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 讓它浮動，并設(shè)置了一個寬度；而 main 沒有設(shè)置寬度。

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

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

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

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

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

3、固定區(qū)域使用定位，自適應(yīng)區(qū)域不設(shè)置寬度，但設(shè)置 margin

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

咦，好像不對，footer 怎么還是在那兒呢？怎么沒有自動往下走呢？footer 說——我不給絕對主義者讓位！
其實這與 footer 無關(guān)，而是因為 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;
}

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

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

float 的值不為 none?

position 的值不為 static 或者 relative?

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

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

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

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

影響

浮動會導(dǎo)致父元素?zé)o法被撐開，影響與父元素同級的元素。

與該浮動元素同級的非浮動元素，如果是塊級元素，會移動到該元素下方，而塊級元素內(nèi)部的行內(nèi)元素會環(huán)繞浮動元素；而如果是內(nèi)聯(lián)元素則會環(huán)繞該浮動元素。

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

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

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

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

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

對 CSS Grid 布局的使用

5 分鐘學(xué)會 CSS Grid 布局

rem、em、px、vh 與 vw 的區(qū)別 ？

一、 rem 的特點

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

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

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

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

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

二、px 特點

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

三、em 特點?

em 的值并不是固定的；

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

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

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

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

四、vh 與 vw

視口

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

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

視口單位中的 “視口”，桌面端指的是瀏覽器的可視區(qū)域；移動端指的就是 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 與 % 區(qū)別

單位 ：解釋

% ：元素的祖先元素

vh / vw ：視口的尺寸

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

什么叫優(yōu)雅降級和漸進增強 ？

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

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

區(qū)別

優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給；

漸進增強則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要；

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

前端硬核面試專題的完整版在此：前端硬核面試專題，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 數(shù)據(jù)結(jié)構(gòu)與算法 + Git 。

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