CSS 面試題匯總

1. 介紹下 BFC 及其應

參考答案：

參考答案：

所謂 BFC，指的是一個獨立的布局環(huán)境，BFC 內(nèi)部的元素布局與外部互不影響。

觸發(fā) BFC 的方式有很多，常見的有：

• 設置浮動
• overflow 設置為 auto、scroll、hidden
• positon 設置為 absolute、fixed

常見的 BFC 應用有：

• 解決浮動元素令父元素高度坍塌的問題
• 解決非浮動元素被浮動元素覆蓋問題
• 解決外邊距垂直方向重合的問題

2. 介紹下 BFC、IFC、GFC 和 FFC

參考答案：

• BFC：塊級格式上下文，指的是一個獨立的布局環(huán)境，BFC 內(nèi)部的元素布局與外部互不影響。
• IFC：行內(nèi)格式化上下文，將一塊區(qū)域以行內(nèi)元素的形式來格式化。
• GFC：網(wǎng)格布局格式化上下文，將一塊區(qū)域以 grid 網(wǎng)格的形式來格式化
• FFC：彈性格式化上下文，將一塊區(qū)域以彈性盒的形式來格式化

3. flex 布局如何使用？

參考答案：

flex 是 Flexible Box 的縮寫，意為"彈性布局"。指定容器display: flex即可。

容器有以下屬性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。

• flex-direction屬性決定主軸的方向；
• flex-wrap屬性定義，如果一條軸線排不下，如何換行；
• flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap；
• justify-content屬性定義了項目在主軸上的對齊方式。
• align-items屬性定義項目在交叉軸上如何對齊。
• align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

項目（子元素）也有一些屬性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。

• order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。
• flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
• flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
• flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。
• flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
• align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。默認值為 auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

4. 怎么讓一個 div 水平垂直居中

參考答案：

水平垂直居中有好多種實現(xiàn)方式，主要就分為兩類不定寬高和定寬高 以在 body 下插入一個 div 為例

定寬高

使用定位 + margin

element.style {position: absolute;left: 50%;top: 50%;margin-left: -250px;margin-top: -250px;width: 500px;height: 500px;background: yellow;z-index: 1;
}

使用定位 + transfrom

element.style {position: absolute;left: 50%;top: 50%;width: 500px;height: 500px;background: yellow;z-index: 1;transform: translate3d(-50%,-50%,0);
}

不定寬高

不定寬高的方法基本都適用于定寬高的情況 這里把 div 的寬高按照內(nèi)容展開，使用定位 + transform 同樣是適用的

element.style {position: absolute;left: 50%;top: 50%;background: yellow;z-index: 1;transform: translate3d(-50%,-50%,0);
}

5. 分析比較 opacity: 0、visibility: hidden、display: none 優(yōu)劣和適用場景。

參考答案：

• 結(jié)構(gòu)： display:none: 會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見，可以點擊

• 繼承： display: none和opacity: 0：是非繼承屬性，子孫節(jié)點消失由于元素從渲染樹消失造成，通過修改子孫節(jié)點屬性無法顯示。 visibility: hidden：是繼承屬性，子孫節(jié)點消失由于繼承了hidden，通過設置visibility: visible;可以讓子孫節(jié)點顯式。

• 性能： displaynone : 修改元素會造成文檔回流,讀屏器不會讀取display: none元素內(nèi)容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內(nèi)容 opacity: 0 ： 修改元素會造成重繪，性能消耗較少

6. 已知如下代碼，如何修改才能讓圖片寬度為 300px ？注意下面代碼不可修改。

<img src="1.jpg" style="width:480px!important;”>

參考答案：

CSS 方法

• max-width:300px; 覆蓋其樣式
• transform: scale(0.625) 按比例縮放圖片；
• 利用 CSS 動畫的樣式優(yōu)先級高于 !important 的特性

JS 方法

• document.getElementsByTagName(“img”)[0].setAttribute(“style”,“width:300px!important;”)

7. 如何用 css 或 js 實現(xiàn)多行文本溢出省略效果，考慮兼容性

參考答案：

CSS 實現(xiàn)方式

單行：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行數(shù)
overflow: hidden;

兼容：

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

JS 實現(xiàn)方式：

• 使用split + 正則表達式將單詞與單個文字切割出來存入words
• 加上 ‘…’
• 判斷scrollHeight與clientHeight，超出的話就從words中pop一個出來

8. 居中為什么要使用 transform（為什么不使用 marginLeft/Top）（阿里）

參考答案：

transform 屬于合成屬性（composite property），對合成屬性進行 transition/animation 動畫將會創(chuàng)建一個合成層（composite layer），這使得被動畫元素在一個獨立的層中進行動畫。通常情況下，瀏覽器會將一個層的內(nèi)容先繪制進一個位圖中，然后再作為紋理（texture）上傳到 GPU，只要該層的內(nèi)容不發(fā)生改變，就沒必要進行重繪（repaint），瀏覽器會通過重新復合（recomposite）來形成一個新的幀。

top/left屬于布局屬性，該屬性的變化會導致重排（reflow/relayout），所謂重排即指對這些節(jié)點以及受這些節(jié)點影響的其它節(jié)點，進行CSS計算->布局->重繪過程，瀏覽器需要為整個層進行重繪并重新上傳到 GPU，造成了極大的性能開銷。

9. 介紹下粘性布局（sticky）（網(wǎng)易）

參考答案：

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

sticky 屬性值有以下幾個特點：

• 該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。
• 當元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)固定在指定位置。亦即如果你設置了top: 50px，那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動。
• 元素固定的相對偏移是相對于離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那么是相對于viewport來計算元素的偏移量

10. 說出 space-between 和 space-around 的區(qū)別？（攜程）

參考答案：

這個是 flex 布局的內(nèi)容，其實就是一個邊距的區(qū)別，按水平布局來說，space-between是兩端對齊，在左右兩側(cè)沒有邊距，而space-around是每個 子項目左右方向的 margin 相等，所以兩個item中間的間距會比較大。

如圖所示：

11. CSS3 中 transition 和 animation 的屬性分別有哪些（嗶哩嗶哩）

參考答案：

transition 過渡動畫：

• transition-property：指定過渡的 CSS 屬性
• transition-duration：指定過渡所需的完成時間
• transition-timing-function：指定過渡函數(shù)
• transition-delay：指定過渡的延遲時間

animation 關(guān)鍵幀動畫：

• animation-name：指定要綁定到選擇器的關(guān)鍵幀的名稱
• animation-duration：動畫指定需要多少秒或毫秒完成
• animation-timing-function：設置動畫將如何完成一個周期
• animation-delay：設置動畫在啟動前的延遲間隔
• animation-iteration-count：定義動畫的播放次數(shù)
• animation-direction：指定是否應該輪流反向播放動畫
• animation-fill-mode：規(guī)定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式
• animation-play-state：指定動畫是否正在運行或已暫停

12. 隱藏頁面中的某個元素的方法有哪些？

參考答案：

1. 隱藏類型

屏幕并不是唯一的輸出機制，比如說屏幕上看不見的元素（隱藏的元素），其中一些依然能夠被讀屏軟件閱讀出來（因為讀屏軟件依賴于可訪問性樹來闡述）。為了消除它們之間的歧義，我們將其歸為三大類：

• 完全隱藏：元素從渲染樹中消失，不占據(jù)空間。
• 視覺上的隱藏：屏幕中不可見，占據(jù)空間。
• 語義上的隱藏：讀屏軟件不可讀，但正常占據(jù)空。

完全隱藏

(1) display 屬性

display: none;

(2) hidden 屬性
HTML5 新增屬性，相當于 display: none

<div hidden>
</div>

視覺上的隱藏

(1) 設置 posoition 為 absolute 或 fixed，通過設置 top、left 等值，將其移出可視區(qū)域。

position:absolute;
left: -99999px;

(2) 設置 position 為 relative，通過設置 top、left 等值，將其移出可視區(qū)域。

position: relative;
left: -99999px;
height: 0

(3) 設置 margin 值，將其移出可視區(qū)域范圍（可視區(qū)域占位）。

margin-left: -99999px;
height: 0;

語義上隱藏

aria-hidden 屬性

讀屏軟件不可讀，占據(jù)空間，可見。

<div aria-hidden="true">
</div>

13. 層疊上下文

參考答案：

層疊上下文概念

在 CSS2.1 規(guī)范中，每個盒模型的位置是三維的，分別是平面畫布上的 X 軸，Y 軸以及表示層疊的 Z 軸。

一般情況下，元素在頁面上沿 X 軸 Y 軸平鋪，我們察覺不到它們在 Z 軸上的層疊關(guān)系。而一旦元素發(fā)生堆疊，這時就能發(fā)現(xiàn)某個元素可能覆蓋了另一個元素或者被另一個元素覆蓋。

層疊上下文觸發(fā)條件

• HTML 中的根元素 HTML 本身就具有層疊上下文，稱為“根層疊上下文”。
• 普通元素設置 position 屬性為非 static 值并設置 z-index 屬性為具體數(shù)值，產(chǎn)生層疊上下文
• CSS3 中的新屬性也可以產(chǎn)生層疊上下文

層疊順序

“層疊順序”（stacking order）表示元素發(fā)生層疊時按照特定的順序規(guī)則在 Z 軸上垂直顯示。

說簡單一點就是當元素處于同一層疊上下文內(nèi)時如何進行層疊判斷。

具體的層疊等級如下圖：

14. 分析比較 opacity: 0、visibility: hidden、display: none 優(yōu)劣和適用場景

參考答案：

1. display: none (不占空間，不能點擊)（場景，顯示出原來這里不存在的結(jié)構(gòu)）
2. visibility: hidden（占據(jù)空間，不能點擊）（場景：顯示不會導致頁面結(jié)構(gòu)發(fā)生變動，不會撐開）
3. opacity: 0（占據(jù)空間，可以點擊）（場景：可以跟transition搭配）

15. 講一下png8、png16、png32的區(qū)別，并簡單講講 png 的壓縮原理

參考答案：

PNG圖片主要有三個類型，分別為 PNG 8/ PNG 24 / PNG 32。

• PNG 8：PNG 8中的8，其實指的是8bits，相當于用2^{8（2的8次方）大小來存儲一張圖片的顏色種類，2}8等于256，也就是說PNG 8能存儲256種顏色，一張圖片如果顏色種類很少，將它設置成PNG 8得圖片類型是非常適合的。
• PNG 24：PNG 24中的24，相當于3乘以8 等于 24，就是用三個8bits分別去表示 R（紅）、G（綠）、B（藍）。R(0-255),G(0-255),B(0-255)，可以表達256乘以256乘以256=16777216種顏色的圖片，這樣PNG 24就能比PNG 8表示色彩更豐富的圖片。但是所占用的空間相對就更大了。
• PNG 32：PNG 32中的32，相當于PNG 24 加上 8bits的透明顏色通道，就相當于R（紅）、G（綠）、B（藍）、A（透明）。R(0_255),G(0255),B(0_255),A(0255)。比PNG 24多了一個A（透明），也就是說PNG 32能表示跟PNG 24一樣多的色彩，并且還支持256種透明的顏色，能表示更加豐富的圖片顏色類型。

PNG圖片的壓縮，分兩個階段：

• 預解析（Prediction）：這個階段就是對png圖片進行一個預處理，處理后讓它更方便后續(xù)的壓縮。
• 壓縮（Compression）：執(zhí)行Deflate壓縮，該算法結(jié)合了 LZ77 算法和 Huffman 算法對圖片進行編碼。

16. 說說漸進增強和優(yōu)雅降級

參考答案：

這并不是一個新的概念，其實就是以前提到的"向上兼容"和"向下兼容"。漸進增強相當于向上兼容，優(yōu)雅降級相當于向下兼容。向下兼容指的是高版本支持低版本，或者說后期開發(fā)的版本能兼容早期開發(fā)的版本。

在確定用戶群體的前提下，漸進增強：針對低版本瀏覽器進行頁面構(gòu)建，保證基本功能，再針對高級瀏覽器進行效果、交互等改進和追加功能，達到更好的用戶體驗。優(yōu)雅降級：一開始就構(gòu)建完整的功能，再針對低版本瀏覽器進行兼容。區(qū)別：優(yōu)雅降級是從復雜的現(xiàn)狀開始并試圖減少用戶體驗的供給，而漸進增強則是從一個基礎的、能夠起到作用的版本開始再不斷擴充，以適應未來環(huán)境的需要。

絕大多少的大公司都是采用漸進增強的方式，因為業(yè)務優(yōu)先，提升用戶體驗永遠不會排在最前面。

• 例如新浪微博網(wǎng)站這樣億級用戶的網(wǎng)站，前端的更新絕不可能追求某個特效而不考慮低版本用戶是否可用。一定是確保低版本到高版本的可訪問性再漸進增強。
• 如果開發(fā)的是一面面向青少面的軟件或網(wǎng)站，你明確這個群體的人總是喜歡嘗試新鮮事物，喜歡炫酷的特效，喜歡把軟件更新至最新版本，這種情況再考慮優(yōu)雅降級。

17. 介紹下 positon 屬性

參考答案：

position 屬性主要用來定位，常見的屬性值如下：

• absolute 絕對定位，相對于 static 定位以外的第一個父元素進行定位。

• relative 相對定位，相對于其自身正常位置進行定位。

• fixed 固定定位，相對于瀏覽器窗口進行定位。

• static 默認值。沒有定位，元素出現(xiàn)在正常的流中。

• inherit 規(guī)定應該從父元素繼承 position 屬性的值。

• sticky 粘性定位，當元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)固定在指定位置。

18. 如何用 CSS 實現(xiàn)一個三角形

參考答案：

可以利用 border 屬性

利用盒模型的 border 屬性上下左右邊框交界處會呈現(xiàn)出平滑的斜線這個特點，通過設置不同的上下左右邊框?qū)挾然蛘哳伾纯傻玫饺切位蛘咛菪巍?/p>

如果想實現(xiàn)其中的任一個三角形，把其他方向上的 border-color 都設置成透明即可。

示例代碼如下：

<div></div>

div{
width: 0;
height: 0;
border: 10px solid red;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}

19. 如何實現(xiàn)一個自適應的正方形

參考答案：

方法1：利用 CSS3 的 vw 單位

vw 會把視口的寬度平均分為 100 份

.square {width: 10vw;height: 10vw;background: red;
}

方法2：利用 margin 或者 padding 的百分比計算是參照父元素的 width 屬性

.square {width: 10%;padding-bottom: 10%; height: 0; // 防止內(nèi)容撐開多余的高度background: red;
}

20. 如何實現(xiàn)三欄布局

參考答案：

三欄布局是很常見的一種頁面布局方式。左右固定，中間自適應。實現(xiàn)方式有很多種方法。

第一種：flex

<div class="container"><div class="left">left</div><div class="main">main</div><div class="right">right</div>
</div>
.container{display: flex;
}
.left{flex-basis:200px;background: green;
}
.main{flex: 1;background: red;
}
.right{flex-basis:200px;background: green;
}

第二種：position + margin

<div class="container"><div class="left">left</div><div class="right">right</div><div class="main">main</div>
</div>
body,html{padding: 0;margin: 0;
}
.left,.right{position: absolute;top: 0;background: red;
}
.left{left: 0;width: 200px;
}
.right{right: 0;width: 200px;
}
.main{margin: 0 200px ;background: green;
}

第三種：float + margin

<div class="container"><div class="left">left</div><div class="right">right</div><div class="main">main</div>
</div>
body,html{padding:0;margin: 0;
}
.left{float:left;width:200px;background:red;
}
.main{margin:0 200px;background: green;
}
.right{float:right;width:200px;background:red;
}

21. import 和 link 區(qū)別

參考答案：

1. 從屬關(guān)系區(qū)別

@import是 CSS 提供的語法規(guī)則，只有導入樣式表的作用；link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。

2. 加載順序區(qū)別

加載頁面時，link標簽引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢后被加載。

3. 兼容性區(qū)別

@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link 標簽作為 HTML 元素，不存在兼容性問題。

4. DOM可控性區(qū)別

可以通過 JS 操作 DOM ，插入link標簽來改變樣式；由于DOM方法是基于文檔的，無法使用@import的方式插入樣式。

22. 說說你對 BFC 的理解

參考答案：

塊級格式化上下文 Block Formatting Context 是 CSS 規(guī)范中一個概念，決定元素的內(nèi)容如何渲染以及與其他元素的關(guān)系。存在5條規(guī)則：

1. BFC 有隔離作用，內(nèi)部元素不受外部元素影響，反之亦然。
2. 一個元素只能存在于一個 BFC 中，如果能同時存在于兩個 BFC 中，那么就違反了 BFC 的隔離原則。
3. BFC 內(nèi)的元素按正常流排列，元素間的間隙由元素外邊距控制。
4. BFC 中的內(nèi)容不會與外面的浮動元素重疊。
5. 計算 BFC 的高度需要包括 BFC 內(nèi)的浮動子元素的高度。

23. 清除浮動的方法

參考答案：

• clear 清除浮動（添加空div法）在浮動元素下方添加空div，并給該元素寫css樣式： {clear:both;height:0;overflow:hidden;}

• 給浮動元素父級設置高度

• 父級同時浮動（需要給父級同級元素添加浮動）

• 父級設置成inline-block，其margin: 0 auto居中方式失效

• 給父級添加overflow:hidden 清除浮動方法

• 萬能清除法 after 偽類清浮動（現(xiàn)在主流方法，推薦使用）

24. 說說選擇器的權(quán)重計算方式

參考答案：

!important 最高，* 為0，行內(nèi)樣式 A 組加一，id 選擇器 B 組加一，類、偽類、屬性選擇器 C 組加一，元素、偽元素 D 組加一。

其中 A 組權(quán)重值為 1000，B 組權(quán)重值為 100，C 組權(quán)重值為 10，D 組權(quán)重值為 1。

25. css reset 和 normalize.css 有什么區(qū)別？

參考答案：

• 兩者都是通過重置樣式，保持瀏覽器樣式的一致性

• 前者幾乎為所有標簽添加了樣式，后者保持了許多瀏覽器樣式，保持盡可能的一致

• 后者修復了常見的桌面端和移動端瀏覽器的 bug：包含了 HTML5 元素的顯示設置、預格式化文字的 font-size 問題、在 IE9 中 SVG 的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的 bug。

• 前者中含有大段的繼承鏈

• 后者模塊化，文檔較前者來說豐富

26. 說說兩種盒模型以及區(qū)別

參考答案：

盒模型也稱為框模型，就是從盒子頂部俯視所得的一張平面圖，用于描述元素所占用的空間。它有兩種盒模型，W3C盒模型和IE盒模型（IE6以下，不包括IE6以及怪異模式下的IE5.5+）

理論上兩者的主要區(qū)別是二者的盒子寬高是否包括元素的邊框和內(nèi)邊距。當用CSS給給某個元素定義高或?qū)挄r，IE盒模型中內(nèi)容的寬或高將會包含內(nèi)邊距和邊框，而W3C盒模型并不會。

27. 如何避免重繪或者重排？

參考答案：

1. 集中改變樣式

我們往往通過改變 class 的方式來集中改變樣式

// 判斷是否是黑色系樣式
const theme = isDark ? 'dark' : 'light'// 根據(jù)判斷來設置不同的class
ele.setAttribute('className', theme)

2. 使用 DocumentFragment

我們可以通過createDocumentFragment創(chuàng)建一個游離于DOM樹之外的節(jié)點，然后在此節(jié)點上批量操作，最后插入DOM樹中，因此只觸發(fā)一次重排

var fragment = document.createDocumentFragment();for (let i = 0;i<10;i++){let node = document.createElement("p");node.innerHTML = i;fragment.appendChild(node);
}document.body.appendChild(fragment);

3. 提升為合成層

將元素提升為合成層有以下優(yōu)點：

• 合成層的位圖，會交由 GPU 合成，比 CPU 處理要快
• 當需要 repaint 時，只需要 repaint 本身，不會影響到其他的層
• 對于 transform 和 opacity 效果，不會觸發(fā) layout 和 paint

提升合成層的最好方式是使用 CSS 的 will-change 屬性：

#target {will-change: transform;
}

28. 如何觸發(fā)重排和重繪？

參考答案：

任何改變用來構(gòu)建渲染樹的信息都會導致一次重排或重繪：

• 添加、刪除、更新DOM節(jié)點
• 通過display: none隱藏一個DOM節(jié)點-觸發(fā)重排和重繪
• 通過visibility: hidden隱藏一個DOM節(jié)點-只觸發(fā)重繪，因為沒有幾何變化
• 移動或者給頁面中的DOM節(jié)點添加動畫
• 添加一個樣式表，調(diào)整樣式屬性
• 用戶行為，例如調(diào)整窗口大小，改變字號，或者滾動。

29. 重繪與重排的區(qū)別？

參考答案：

• 重排: 部分渲染樹（或者整個渲染樹）需要重新分析并且節(jié)點尺寸需要重新計算，表現(xiàn)為重新生成布局，重新排列元素
• 重繪: 由于節(jié)點的幾何屬性發(fā)生改變或者由于樣式發(fā)生改變，例如改變元素背景色時，屏幕上的部分內(nèi)容需要更新，表現(xiàn)為某些元素的外觀被改變

單單改變元素的外觀，肯定不會引起網(wǎng)頁重新生成布局，但當瀏覽器完成重排之后，將會重新繪制受到此次重排影響的部分

重排和重繪代價是高昂的，它們會破壞用戶體驗，并且讓UI展示非常遲緩，而相比之下重排的性能影響更大，在兩者無法避免的情況下，一般我們寧可選擇代價更小的重繪。

『重繪』不一定會出現(xiàn)『重排』，『重排』必然會出現(xiàn)『重繪』。

30. 如何優(yōu)化圖片

參考答案：

1. 對于很多裝飾類圖片，盡量不用圖片，因為這類修飾圖片完全可以用 CSS 去代替。

2. 對于移動端來說，屏幕寬度就那么點，完全沒有必要去加載原圖浪費帶寬。一般圖片都用 CDN 加載，可以計算出適配屏幕的寬度，然后去請求相應裁剪好的圖片。

3. 小圖使用 base64 格式

4. 將多個圖標文件整合到一張圖片中（雪碧圖）

5. 選擇正確的圖片格式：

• 對于能夠顯示 WebP 格式的瀏覽器盡量使用 WebP 格式。因為 WebP 格式具有更好的圖像數(shù)據(jù)壓縮算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的圖像質(zhì)量，缺點就是兼容性并不好
• 小圖使用 PNG，其實對于大部分圖標這類圖片，完全可以使用 SVG 代替
• 照片使用 JPEG

31. 說說重繪（Repaint）和回流（Reflow）

參考答案：

請參閱前面 28、29、30 題。

32. 你能描述一下漸進增強和優(yōu)雅降級之間的不同嗎?

參考答案：

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

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

區(qū)別：優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環(huán)境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

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

參考答案：

首先使用 CSS3 新增的 border-radius 屬性來將一個區(qū)域變成圓形，然后再使用 JS 來綁定事件。

34. 什么是漸進式渲染（progressive rendering）？

參考答案：

漸進式渲染是用于提高網(wǎng)頁性能（尤其是提高用戶感知的加載速度），以盡快呈現(xiàn)頁面的技術(shù)。

在以前互聯(lián)網(wǎng)帶寬較小的時期，這種技術(shù)更為普遍。如今，移動終端的盛行，而移動網(wǎng)絡往往不穩(wěn)定，漸進式渲染在現(xiàn)代前端開發(fā)中仍然有用武之地。

一些舉例：

• 圖片懶加載——頁面上的圖片不會一次性全部加載。當用戶滾動頁面到圖片部分時，JavaScript 將加載并顯示圖像。
• 確定顯示內(nèi)容的優(yōu)先級（分層次渲染）——為了盡快將頁面呈現(xiàn)給用戶，頁面只包含基本的最少量的 CSS、腳本和內(nèi)容，然后可以使用延遲加載腳本或監(jiān)聽DOMContentLoaded/load事件加載其他資源和內(nèi)容。
• 異步加載 HTML 片段——當頁面通過后臺渲染時，把 HTML 拆分，通過異步請求，分塊發(fā)送給瀏覽器。

35. CSS3 新增了那些東西？

參考答案：

CSS3 新增東西眾多，這里列舉出一些關(guān)鍵的新增內(nèi)容：

• 選擇器
• 盒子模型屬性：border-radius、box-shadow、border-image
• 背景：background-size、background-origin、background-clip
• 文本效果：text-shadow、word-wrap
• 顏色：新增 RGBA，HSLA 模式
• 漸變：線性漸變、徑向漸變
• 字體：@font-face
• 2D/3D轉(zhuǎn)換：transform、transform-origin
• 過渡與動畫：transition、@keyframes、animation
• 多列布局
• 媒體查詢

36. 我想實現(xiàn)一根只有 1px 的長線怎么實現(xiàn)?

參考答案：

實現(xiàn)的方式很多，下面是一種參考方案：

.line {
width: 100%;
height: 1px;
overflow: hidden;
font-size: 0px; 
border-bottom: dashed 1px #ccc;
}

<div class="line"></div>

37. 三角形怎么實現(xiàn)？要設置寬高嗎？

參考答案：

設置塊級元素寬高為 0，邊框3條設置為透明色。具體可以參閱第 18 題答案

38. box-sizing 有什么作用？

參考答案：

box-sizing 是用于告訴瀏覽器如何計算一個元素是總寬度和總高度，主要用來切換標準盒模型和 IE 盒子。

• 標準盒模型 box-sizing: content-box
  content-box:
  width = content width;
  height = content height

• IE盒模型 box-sizing: border-box
  border-box:
  width = border + padding + content width
  heigth = border + padding + content heigth

39. img 標簽在頁面中有 1px 的邊框，怎么處理

參考答案：

img{border: 0;
}

40. 如何絕對居中（不用定位）（看書網(wǎng)）

參考答案：

方法一：

使用 flex 彈性盒來絕對居中

方法二：

設置 margin-left 為 calc(50% - 50px);

41. CSS 選擇器權(quán)重值

參考答案：

請參閱前面第 24 題答案。

42. 我有5個div在一行，我要讓div與div直接間距10px且最左最右兩邊的div據(jù)邊框10px，同時在我改變窗口大小時，這個10px不能變，div根據(jù)窗口改變大小（長天星斗）

參考答案：

*{
margin: 0;
}
.container {
display: flex;
}
.container>div{
outline: 1px solid;
margin: 0 5px;
flex-grow: 1;
}.container>div:first-child {
margin-left: 10px;
}
.container>div:last-child {
margin-right: 10px;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

43. bootstrap 響應式的原理是什么

參考答案：

bootstrap 使用的是柵格布局。柵格布局的實現(xiàn)原理，是通過定義容器大小，平分 12 份，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強大的響應式網(wǎng)格系統(tǒng)。

44. 如何做響應式？

參考答案：

可以使用 CSS3 新增的媒體查詢。

媒體查詢的語法如下：

@media mediatype and|not|only (media feature) { CSS-Code;}

45. 什么是響應式設計

參考答案：

響應式設計簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

優(yōu)點：

• 面對不同分辨率設備靈活性強
• 能夠快捷解決多設備顯示適應問題

缺點：

兼容各種設備工作量大，效率低下

代碼累贅，會出現(xiàn)隱藏無用的元素，加載時間加長

其實這是一種折中性質(zhì)的設計解決方案，多方面因素影響而達不到最佳效果

一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況

具體步驟：

• 第一步：meta 標簽

為了適應屏幕，多數(shù)的移動瀏覽器會把HTML網(wǎng)頁縮放到設備屏幕的寬度。你可以使用meta標簽的viewport屬性來設置。下面的代碼告訴瀏覽器使用設備屏幕寬度作為內(nèi)容的寬度，并且忽視初始的寬度設置。這段代碼寫在 <head>里面

<meta name="viewport" content="width=device-width, initial-scale=1.0">

IE8及以下的瀏覽器不支持media query。你可以使用 media-queries.js 或 respond.js 。這樣IE就能支持media query了。

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

• 第二步：HTML 結(jié)構(gòu)

這個例子里面，有header、content、sidebar和footer等基本的網(wǎng)頁布局。

header 有固定的高180px，content 容器的寬是600px，sidebar的寬是300px。

• 第三步：Media Queries

CSS3 media query 響應式網(wǎng)頁設計的關(guān)鍵。它像一個 if 語句，告訴瀏覽器如何根據(jù)特定的屏幕寬口來加載網(wǎng)頁。

下面是一個媒體查詢示例代碼：

@media screen and (max-width: 300px) {body {background-color:lightblue;}
}

如果文檔寬度小于 300 像素則修改背景演示(background-color)

46. 塊級元素轉(zhuǎn)行內(nèi)元素除了 display:inline 還有什么？

參考答案：

display:inline-block

47. 對 CSS hack 技術(shù)的理解

參考答案：

什么是CSS hack
由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不一樣，導致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果。這時，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!

CSS hack的原理
由于不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結(jié)果不一樣，以及CSS優(yōu)先級對瀏覽器展現(xiàn)效果的影響，我們可以據(jù)此針對不同的瀏覽器情景來應用不同的CSS。

CSS hack分類
CSS Hack大致有3種表現(xiàn)形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。

• 屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識別下劃線"“和星號” * “，IE7能識別星號” * “，但不能識別下劃線”“，IE6~IE10都認識”\9"，但firefox前述三個都不能認識。
• 選擇器前綴法(即選擇器Hack)：例如 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}。
• IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： <!--[if IE]>IE瀏覽器顯示的內(nèi)容 <![endif]-->，針對IE6及以下版本： <!--[if lt IE 6]>只在IE6-顯示的內(nèi)容 <![endif]-->。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。

下面是微軟官方推薦使用的 hack 方式：

只在IE下生效<!--[if IE]>  這段文字只在IE瀏覽器顯示<![endif]-->只在IE6下生效<!--[if IE 6]>  這段文字只在IE6瀏覽器顯示<![endif]-->只在IE6以上版本生效<!--[if gte IE 6]>  這段文字只在IE6以上(包括)版本IE瀏覽器顯示<![endif]-->只在IE8上不生效<!--[if ! IE 8]>  這段文字在非IE8瀏覽器顯示<![endif]-->非IE瀏覽器生效<!--[if !IE]>  這段文字只在非IE瀏覽器顯示<![endif]-->

48. px 和 em 的區(qū)別

參考答案：

• px 即 pixel 像素，是相對于屏幕分辨率而言的，是一個相對絕對單位，即在同一設備上每個設備像素所代表的物理長度是固定不變的（絕對性），但在不同設備間每個設備像素所代表的物理長度是可以變化的（相對性）。
• em 一個相對單位，不是一個固定的值，來源于紙張印刷業(yè)，在 web 領域它指代基準字號，瀏覽器默認渲染文字大小是 16px ，它會繼承計算后的父級元素的 font-size。

49. div 之間的間隙是怎么產(chǎn)生的，應該怎么消除？

參考答案：

原因：瀏覽器解析的時候，會把回車換行符解析成一定的間隙，間隙的大小跟默認的字體大小設置有關(guān)。

解決：其父元素加上 font-size:0 的屬性，但是字體需要額外處理。

50. position 有哪些值，各自的用法如何？

參考答案：

position 屬性值有 static、relative、absolute、fixed、sticky。

1. static：該關(guān)鍵字指定元素使用正常的布局行為，即元素在文檔常規(guī)流中當前的布局位置。

2. relative：相對定位的元素是在文檔中的正常位置偏移給定的值，但是不影響其他元素的偏移。

3. absolute：相對定位的元素并未脫離文檔流，而絕對定位的元素則脫離了文檔流。在布置文檔流中其它元素時，絕對定位元素不占據(jù)空間。絕對定位元素相對于最近的非 static 祖先元素定位。

4. fixed：固定定位與絕對定位相似，但元素的包含塊為 viewport 視口。該定位方式常用于創(chuàng)建在滾動屏幕時仍固定在相同位置的元素。

5. sticky：粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。

51. 相對定位、絕對定位、固定定位的區(qū)別

參考答案：

請參閱上一題答案。

52. display:none 和 visibility:hidden 的區(qū)別

參考答案：

相同點：都是設置某一個 DOM 元素不可見

區(qū)別：

• display:none 設置不可見后不會再存在于文檔流中，也就是說不會再占據(jù)空間
• visibility:hidden 仍然存在于文檔流中，之前所占據(jù)的空間還存在

53. 觸發(fā) BFC 的機制

參考答案：

請參閱前面第 1 題。

54. div 怎么垂直居中

參考答案：

div 垂直居中的方式比較多，常見的有下面 3 種：

• 利用絕對定位實現(xiàn)的居中
• 利用flex垂直居中
• transform+relative實現(xiàn)的居中

解析：

下面針對上面所列舉的 3 種垂直居中的方式，給出對應的代碼片段

利用絕對定位實現(xiàn)的居中

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>居中</title><style type="text/css">*{padding: 0px;margin: 0px;}body {height: 100%;overflow: hidden;}.father{position: absolute;height: 500px;width: 100%;background-color:#2AABD2;}.children{position: absolute;top: 50%;left: 50%;background-color: red;width: 100px; height: 100px;margin: -50px 0 0 -50px;}</style></head><body><div class="father"><div class="children"></div></div></body>
</html>

利用flex垂直居中

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>居中</title><style type="text/css">*{padding: 0px;margin: 0px;}body {height: 100%;overflow: hidden;}.father{height: 500px;width: 100%;background-color:#2AABD2;display: flex;justify-content: center;/*實現(xiàn)水平居中*/align-items:center; /*實現(xiàn)垂直居中*/}.children{background-color: red;width: 100px; height: 100px;}</style></head><body><div class="father"><div class="children"></div></div></body>
</html>

transform+relative實現(xiàn)的居中

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>居中</title><style type="text/css">*{padding: 0px;margin: 0px;}body {height: 100%;overflow: hidden;}.father{position: absolute;height: 500px;width: 100%;background-color:#2AABD2;}.children{width: 300px;height: 150px;background-color: #333333;position: relative;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);}</style></head><body><div class="father"><div class="children"></div></div></body>
</html>

55. less、sass 是什么？為什么要用它？

參考答案：

Less 和 Sass 被稱之為 CSS 預處理器。

CSS 預處理器可以為 CSS 增加變編程特性，通過編譯器將使用新語法的文件輸出為一個 CSS 文件，解決 CSS 難以復用、代碼冗余、可維護性低的缺點。常見的預處理器有 less、sass、stylus。

使用他們來書寫 CSS 代碼可以更符合編程思維、簡化代碼、提高代碼重用、便于維護。

56. 如何隱藏一個 DOM 元素

參考答案：

1. display: none;
2. visibility: hidden;
3. opacity: 0;

57. 你怎么處理頁面兼容性問題？

參考答案：

1. 統(tǒng)一標準模式
2. 利用 CSS 重置技術(shù)初始化默認樣式
3. 針對不同瀏覽器采用不同的解決方案
4. 使用 CSS Hack 技術(shù)

58. CSS 引用的方式有哪些？link 和 @import 的區(qū)別？

參考答案：

CSS 引用的方式有：

• 外聯(lián)，通過 link 標簽外部鏈接樣式表
• 內(nèi)聯(lián)，在 head 標記中使用 style 標記定義樣式
• 嵌入，在元素的開始標記里通過 style 屬性定義樣式

link 和 @import 的區(qū)別：

1. link 屬于 HTML 標簽，而 @import 完全是 CSS 提供的一種方式。

   link 標簽除了可以加載 CSS 外，還可以做很多其它的事情，比如定義 RSS，定義 rel 連接屬性等，@import 就只能加載 CSS 了。

2. 加載順序的差別。

   比如，在 a.css 中使用 import 引用 b.css，只有當使用當使用 import 命令的宿主 css 文件 a.css 被下載、解析之后，瀏覽器才會知道還有另外一個 b.css 需要下載，這時才去下載，然后下載后開始解析、構(gòu)建 render tree 等一系列操作.

3. 兼容性的差別。

   由于 @import 是 CSS2.1 提出的所以老的瀏覽器不支持，@import 只有在 IE5 以上的才能識別，而 link 標簽無此問題。

4. 當使用 JS 控制 DOM 去改變樣式的時候，只能使用 link 標簽，因為 @import 不是 DOM 可以控制的。

   對于可換皮膚的網(wǎng)站而言，可以通過改變 link 便簽這兩個的 href 值來改變應用不用的外部樣式表，但是對于 import 是無法操作的，畢竟不是標簽。

59. CSS 動畫如何實現(xiàn)？

參考答案：

即 animation 屬性，對元素某個或多個屬性的變化進行控制，可以設置多個關(guān)鍵幀。屬性包含了動畫的名稱、完成時間（以毫秒計算）、周期、間隔、播放次數(shù)、是否反復播放、不播放時應用的樣式、動畫暫?；蜻\行。

它不需要觸發(fā)任何事件就可以隨著時間變化來改變元素的樣式。

使用 CSS 做動畫：

• @keyframes 規(guī)定動畫。
• animation 所有動畫屬性的簡寫屬性。
• animation-name 規(guī)定 @keyframes 動畫的名稱。
• animation-duration 規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0。
• animation-timing-function 規(guī)定動畫的速度曲線。默認是 ease。
• animation-fill-mode 規(guī)定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
• animation-delay 規(guī)定動畫何時開始。默認是 0。
• animation-iteration-count 規(guī)定動畫被播放的次數(shù)。默認是 1。
• animation-direction 規(guī)定動畫是否在下一周期逆向地播放。默認是 normal。
• animation-play-state 規(guī)定動畫是否正在運行或暫停。默認是 running。

60. display：inline-block 在什么情況下會產(chǎn)生間隙？

參考答案：

空隙產(chǎn)生的原因

元素被當成行內(nèi)元素排版的時候，元素之間的空白符（空格、回車換行等）都會被瀏覽器處理，根據(jù) white-space 的處理方式（默認是 normal，合并多余空白），原來 HTML 代碼中的回車換行被轉(zhuǎn)成一個空白符，在字體不為 0 的情況下，空白符占據(jù)一定寬度，所以 inline-block 的元素之間就出現(xiàn)了空隙。

這些元素之間的間距會隨著字體的大小而變化，例如：當行內(nèi)元素 font-size:16px 時，間距為8px。

解決空隙的辦法

1. 辦法一：解決元素之間的空白符

<!-- 將前一個標簽結(jié)束符和后一個標簽開始符寫在同一行 -->
<div class="parent"><div class="child">child1</div><div class="child">child2</div>
</div>
<!-- 將所有子元素寫在同一行 -->
<div class="parent"><div class="child">child1</div><div class="child">child2</div>
</div>

缺點：代碼的可讀性變差。

2. 方法二：為父元素中設置 font-size: 0，在子元素上重置正確的 font-size

<div class="parent" style="font-size: 0px">  <div class="child" style="font-size: 16px">child1</div>  <div class="child" style="font-size: 16px">child2</div></div>

缺點：inline-block 元素必須設定字體，不然行內(nèi)元素中的字體不會顯示。 增加了代碼量。

3. 方法三：為 inline-block 元素添加樣式 float:left

缺點：float布局會有高度塌陷問題

4. 方法四：設置子元素margin值為負數(shù)

.parent .child + .child {margin-left: -2px
}

缺點：元素之間間距的大小與上下文字體大小相關(guān)；并且同一大小的字體，元素之間的間距在不同瀏覽器下是不一樣的。

如：font-size:16px時，Chrome下元素之間的間距為 8px,而 Firefox 下元素之間的間距為 4px。所以不同瀏覽器下 margin-right 的負值是不一樣的，因此這個方法不通用。

注意：當 marigin-right 使用相對單位 em 來表示時，Chrome 下可以正常去除間距,而 Firefox 下元素之間有重疊。

5. 方法五：最優(yōu)解在這，設置父元素，display:table 和 word-spacing

.parent{display: table;word-spacing:-1em; /*兼容其他瀏覽器，題主還未驗證*/
}

61. position 和 display、overflow 發(fā)生重疊時會發(fā)生什么？

參考答案：

浮動的行內(nèi)變成塊級元素，絕對定位的行內(nèi)也會變成塊級元素。絕對定位時浮動失效，top,bottom,left,right能改變位置。相鄰普通流塊級垂直方向margin疊壓。浮動，inline-block，絕對定位不會和垂直方向其他元素margin疊壓。BFC不會和子元素margin疊壓。(absolute,fixed都是絕對定位)

62. 什么是選擇器？有哪些選擇器？

參考答案：

選擇器決定將樣式應用在哪個或哪些元素身上。

• 元素選擇器：例如 div{…} p{…}
• id 選擇器： 例如 #box{…}
• 類選擇器： 例如 .box{…}
• 屬性選擇器：[href=“#”]{…}
• 通配：*{…}
• 組合（并集）選擇器：div,p,a,.main{…}
• 交集選擇器：input[type=“text”]{…}
• 后代選擇器：header nav{…}
• 子級選擇器： ul>li{…}
• 偽類選擇器：
  • :nth-child(num){…}
  • :nth-child(odd){…}
  • :nth-child(even){…}
  • :nth-of-type{…}
  • :first-child{…}
  • :last-child{…}
  • only-child{…}
  • a:link{…}
  • a:visited{…}
  • :hover{…}
  • a:active{…}
• 偽元素選擇器：
  • ::before{…}
  • ::after{…}
  • ::first-letter{…}
  • ::first-line{…}

63. 什么是繼承？CSS 中哪些屬性可以繼承？哪些不可以繼承？

參考答案：

• 繼承，指元素可以自動獲得祖先元素的某些 CSS 屬性。通常來說文本類的屬性具有繼承性。
• 文本類的樣式可以繼承：例如 color、 font-size、 line-height、 font-family、 font-weight、 font-weight、 text-decoration、 letter-spacing、text-align 等等
• display、 margin、 padding、 border、 background、 position、 float 等則不會被繼承

64. 談談你對響應式的理解。

參考答案：

響應式布局是 Ethan Marcotte 在2010年5月提出的一個概念。即頁面的設計與開發(fā)應當根據(jù)用戶行為，以及設備環(huán)境進行相應的響應與調(diào)整。能讓一個網(wǎng)站兼容多個終端，展示出不同的結(jié)構(gòu)樣式，而不是為每個終端做一個特定的版本。

具體的實踐方式可由多方面組成，包括使用 flex 布局、使用 CSS3 媒介查詢 media query 實現(xiàn)。其特點在于靈活性較強，但缺點在于兼容性較差、工作量巨大、代碼冗余、網(wǎng)頁加載時間過長。

65. CSS 的計算屬性知道嗎

參考答案：

即 calc( ) 函數(shù)，主要用于指定元素的長度，支持所有 CSS 長度單位，運算符前后都需要保留一個空格。

比如： width: calc(100% - 50px);

66. 為何 CSS 放在 HTML 頭部？

參考答案：

為了盡早讓瀏覽器拿到 CSS 并且生成 CSSOM，然后與 HTML 一次性生成最終的 RenderTree，渲染一次即可。如果放在 HTML 底部，會出現(xiàn)渲染卡頓的現(xiàn)象影響性能和用戶體驗。

67. background-size 有哪 4 種值類型？

參考答案：

background-size: length|percentage|cover|contain;

• length：設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為 auto(自動)
• percentage：將計算相對于背景定位區(qū)域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為“auto(自動)”
• cover：此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。
• contain：此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。

68. transition、transform、animate 的區(qū)別？

參考答案：

transition：過渡效果，它有4個屬性：

transition: property duration timing-function delay;

• property ：css屬性的名稱

• duration ：多長時間完成

• timing-function：轉(zhuǎn)速曲線

• delay：開始的時候。

transform： 應用于元素的 2D 或 3D 轉(zhuǎn)換。這個屬性允許你將元素旋轉(zhuǎn)，縮放，移動，傾斜等。

• 旋轉(zhuǎn)：rotate
• 縮放：scale
• 移動：translate
• 傾斜：skew

animate：應用動畫效果。語法如下：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• name ：定義的名稱
• duration ：多長時間完成
• delay ：開始前多長的延遲
• iteration-count：播放幾次
• direction ：指定是否應該輪流反向播放動畫。
• fill-mode：結(jié)束的狀態(tài)
• play-state：指定動畫是否正在運行或已暫停。

69. 描述 CSS reset 的作用和用途？

參考答案：

因為不同瀏覽器間的內(nèi)核存在差異，對于標記都有自己默認的樣式用來保證在沒有自定樣式的情況下也能被排列、渲染。但各個廠家有自己的風格樣式，想要樣式不被瀏覽器默認樣式影響，就需要清除默認樣式，使各瀏覽器表現(xiàn)得一致。

70. 在 CSS 中，關(guān)于盒子的 margin 屬性敘述正確的是

A. 邊距 margin 只能取一個值

B. margin 邊距的屬性有 margin-left、margin-right、margin-top、margin-bottom

C. margin 屬性的值不可為 auto

D. margin 的參數(shù)值不能全部設置為 0px

參考答案：

B

解析：

選項 A，margin 能夠設置四個方向的值

選項 C，可以為 auto

選項 D，可以設置為 0px

71. 以下代碼中，屬于相對定位的是

A. #b{width:100px; position:relative}

B. #b{width:100px; position:static}

C. #b{width:100px;}

D. #b{width:100px; position:absolute}

參考答案：

A

解析：

B 和 C 都是靜態(tài)定位，D 是絕對定位

72. 以下選項中不能實現(xiàn)清除浮動的是（ ）

A. 空 div

B. hover 偽選擇器

C. clear 屬性

D. overflow 屬性

參考答案：

B

A、C、D 是常用的清除浮動的方式，B 是為元素添加 hover 效果

73. 關(guān)于 z-index 屬性敘述正確的是（ ）

A. 必須與 postion 一起使用才能生效，此時 postion 取任何值都可以

B. 此值越大，層的順序越往下

C. 一般后添加的元素，其 z-index 值越大

D. 即使上面的層沒有任何內(nèi)容也會擋住下面的層，使下面的層顯示不出來

參考答案：

C

解析：

選項 A 確實要和 postion 一起使用，但是不是任何值都可以，z-index 僅能在定位元素上奏效（例如 absolute）

選項 B 值越大，層的順序越在上面

選項 D，如果當前層沒有內(nèi)容或者內(nèi)容是透明的，是可以看到下面的層的內(nèi)容的

74. 有一個高度自適應的 div，里面有 2 個 div，一個高度 100px，希望另一個填滿剩下的高度？（CSS 實現(xiàn)）

參考答案：

方法一：利用定位

<div class="main">
<div class="box1"></div>
<div class="box2"></div>
</div>

html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}.main {
position: relative;
height: 100%;
}.box1 {
height: 100px;
background-color: red;
}.box2 {
position: absolute;
width: 100%;
top: 100px;
bottom: 0px;
background-color: blue;
}

方法二：利用計算屬性calc

html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}.main {
height: 100%;
}.box1 {
height: 100px;
background-color: red;
}.box2 {
height: calc(100% - 100px);
background-color: blue;
}

75. display 有哪些值？說明他們的作用。

參考答案：

常用的有：

• none：此元素不顯示。
• block：將元素顯示為塊級元素，前后會帶換行符。
• inline：默認值，元素會被顯示為內(nèi)聯(lián)元素，前后沒有換行符。
• inline-block：行內(nèi)塊級元素。

76. position 的值 relative 和 absolute 的定位原點是？

參考答案：

• absolute：生成絕對定位的元素，定位原點是離自己這一級元素最近的一級 position 設置為 absolute 或者 relative 的父元素的左上角為原點的。
• relative：生成相對定位的元素，定位原點是元素本身所在位置。

77. 當 margin-top、padding-top 的值是百分比時，分別是如何計算的？

A. 相對父級元素的 height，相對自身的 height

B. 相對最近父級塊級元素的 height，相對自身的 height

C. 相對父級元素的 width，相對自身的 width

D. 相對最近父級塊級元素的 width，相對最近父級塊級元素的 width

參考答案：

D

可以對元素的margin設置百分數(shù)，百分數(shù)是相對于父元素的width計算，不管是margin-top/margin-bottom還是margin-left/margin-right。（padding同理）

如果沒有為元素聲明width，在這種情況下，元素框的總寬度包括外邊距取決于父元素的width，這樣可能得到“流式”頁面，即元素的外邊距會擴大或縮小以適應父元素的實際大小。如果對這個文檔設置樣式，使其元素使用百分數(shù)外邊距，當用戶修改瀏覽窗口的寬度時，外邊距會隨之擴大或縮小。

78. 偽元素 :before :after 的作用？

參考答案：

特有的 content 可用于在 CSS 中向元素的頭部或尾部添加內(nèi)容，常用于制作小圖標。

79. 如何使用選擇器來隱藏第一個列表項目？

參考答案：

ul>li:first-child{ 
display: none; 
}

80. transition 和 animation 的區(qū)別以及應用場景？

參考答案：

• 區(qū)別：
  1. 觸發(fā)條件不同。transition 通常需要交互，由事件觸發(fā)。animation 則與 gif 動圖差不多，立即播放。
  2. 循環(huán)。animation 可以設定循環(huán)次數(shù)。
  3. 精確性。animation 可以設定每一幀的樣式和時間，其中的每一幀都可以有單獨的變化。而 transition 中的所有樣式都是一起變化的。
  4. 與 JS 的交互。使用 JS 去操作時，transition 更多。
• 應用場景：
  1. 如果需要靈活定制多幀以及循環(huán)，使用 animation 。
  2. 如果只是簡單的從 XX 樣式變到 XX 樣式，兩者皆可。
  3. 如果要使用 JS 設定動畫，使用 transition 。

81. 在 rem 自適應頁面中使用 sprite 會出現(xiàn)背景圖不隨元素放大縮小的情況，如何解決？

參考答案：

將 backgroud-size 也換算為 rem 作為單位。

82. Normalize 是什么？

參考答案：

一個樣式表的重置文件。因為不同瀏覽器間的內(nèi)核存在差異，對于標記都有自己默認的樣式用來保證在沒有自定樣式的情況下也能被排列、渲染。但各個廠家有自己的風格樣式，想要樣式不被瀏覽器默認樣式影響，就需要清除默認樣式，使各瀏覽器表現(xiàn)得一致。

83. 談一談 CSS 中的 2D 轉(zhuǎn)換。

參考答案：

即 transform，能夠?qū)υ剡M行移動、縮放、拉伸。

1. translate(x, y): 元素從當前位置根據(jù)給定的 x 坐標 y 坐標移動。
2. rotate(angle): 元素順時針旋轉(zhuǎn)指定的角度，若為負值則逆時針旋轉(zhuǎn)。
3. scale(num, num): 放大或縮小元素。
4. skew(angle, angle): 圍繞 X Y 軸進行轉(zhuǎn)動。

84. 談一談 CSS3 多列屬性是什么？以及其使用場景

參考答案：

多列布局是 CSS3 新增的一組屬性，常用的屬性如下：

• column-count: num: 規(guī)定元素被分隔的列數(shù)。
• column-gap: num; 規(guī)定列之間的間隔。
• column-rule: width style color: 規(guī)定列之間的樣式規(guī)則。

更多多列布局相關(guān)屬性可以參閱：https://www.runoob.com/css3/css3-multiple-columns.html

應用場景：可以將文本內(nèi)容設計成像報紙一樣的多列布局。

85. vw、vh 是什么？

參考答案：

vw 和 vh 是 CSS3 新單位，即 view width 可視窗口寬度 和 view height 可視窗口高度。1vw 就等于可視窗口寬度的百分之一，1vh 就等于可視窗口高度的百分之一。

86. 如何通過選擇器選擇 3 的倍數(shù)？

參考答案：

:nth-child(3n){…}

87. 頁面布局有幾種方式？

參考答案：

1. 固定寬度布局：為網(wǎng)頁設置一個固定的寬度，通常以 px 做為長度單位，常見于 PC 端網(wǎng)頁。
2. 流式布局：為網(wǎng)頁設置一個相對的寬度，通常以百分比做為長度單位。
3. 柵格化布局：將網(wǎng)頁寬度人為的劃分成均等的長度，然后排版布局時則以這些均等的長度做為度量單位，通常利用百分比做為長度單位來劃分成均等的長度。
4. 響應式布局：通過檢測設備信息，決定網(wǎng)頁布局方式，即用戶如果采用不同的設備訪問同一個網(wǎng)頁，有可能會看到不一樣的內(nèi)容，一般情況下是檢測設備屏幕的寬度來實現(xiàn)。

88. 什么是流式布局？

參考答案：

即 Fluid Layout 。這種布局方式在前端開發(fā)的早期歷史上用來應對不同尺寸的 PC 屏幕，那時的屏幕尺寸差異不會太大，在當今的移動設備開發(fā)也常用。

流式布局是頁面元素寬度依照屏幕分辨率進行適配調(diào)整，但整體布局不變，其代表就是柵格系統(tǒng)（網(wǎng)格布局）。劃分區(qū)域的尺寸使用百分比（通常也會搭配 min-* 或 max-*）。例如設置網(wǎng)頁主體寬度為 85%，min-width 為 960px，圖片也做類似的處理 width: 100%; max-width 設置為圖片本身尺寸以防止被拉伸變形。

布局特點在于：屏幕分辨率發(fā)生變化時布局不變元素尺寸變。但缺點也很明顯，如果屏幕尺寸跨度太大，那么在相對其原始設計而言過大過小的屏幕上就不能正常顯示。

89. 什么是靜態(tài)布局？

參考答案：

即 Static Layout。傳統(tǒng)的 web 設計，網(wǎng)頁中所有元素的尺寸一律使用 px 作為單位。

布局特點在于：無論瀏覽器尺寸為多少，布局始終按照最初的設計稿布局來顯示。常規(guī)的 PC 網(wǎng)站都是使用的靜態(tài)（定寬度）布局，如果瀏覽器小于這個寬度則出現(xiàn)滾動條，如果瀏覽器大于這個寬度則內(nèi)容居中或添加背景。這些設計方式是最常見的。

在 PC 中，居中布局，所有樣式使用一個絕對寬度（定寬）適配當今主流屏幕寬度。在移動設備中，另外建立移動網(wǎng)站，單獨設計一個布局，使用不同的域名，比如 wap. 或 m.。

這種布局方案對于 UI 設計師和前端開發(fā)人員來說都是最簡單、沒有兼容性問題的。但缺點顯而易見，需要做兩次開發(fā)。當前大部門門戶網(wǎng)站、企業(yè)宣傳站點都采用了這種布局方式。

90. 什么是自適應布局？什么是響應式布局？

參考答案：

自適應布局

即 Adaptive Layout ，可以把自適應布局看作是靜態(tài)布局的一個系列。其特點就是分別為不同屏幕分辨率定義布局，即創(chuàng)建多個靜態(tài)布局，每個靜態(tài)布局對應一個屏幕分辨率范圍，改變分辨率可以切換不同的靜態(tài)布局，頁面元素位置發(fā)生改變，元素不隨窗口大小的調(diào)整而變化。

布局特點在于：屏幕分辨率變化時元素位置發(fā)生變化，尺寸不變。

響應式布局

即 Responsive Layout，其目標是確保一個頁面在所有終端（各種尺寸的 PC、手機、電視等）都能完美展現(xiàn)，對于開發(fā)人員來說通常是結(jié)合了流式布局 + 彈性布局 + 媒介查詢。分別為不同屏幕分辨率定義布局。

其特點在于：每個屏幕分辨率下都會有一個布局樣式，元素位置、尺寸都會隨之發(fā)生改變。使用多種布局方法配合，如果足夠耐心效果完美。但缺點在于：媒介查詢有限只能適應主流寬高，需要匹配足夠多的屏幕大小工作量巨大，設計和開發(fā)都要需要多個版本。

91. 對比各種布局方式的特點。

參考答案：

原理其實類似，都是檢測設備，根據(jù)不同的設備采用不同的 CSS，而且 CSS 都是采取百分比的方式。不同點在于：

• 響應式的模板在不同設備上看上去不同，會隨著設備的改變而改變表現(xiàn)樣式，常用于解決不同設備間分辨率間的兼容。
• 自適應則是所有設備看起來都是一個模板，不過就是元素長度、圖片尺寸變化。
• 流式則是采用了一些設置，當寬度大于多少時將怎樣展示，小于多少時將怎樣展示，并且，展示方向像水流一樣一部分一部分的加載。常用于解決分辨率差異較小的情況。
• 靜態(tài)即采用固定寬度。

92. 文字超出了元素的寬度如何使用 CSS 處理？

參考答案

可以使用 word-wrap 配合 word-break 屬性來進行處理。

示例代碼如下：

p{
word-wrap: break-word;word-break: break-all;overflow: hidden;
}

93. 內(nèi)外邊距取值 1 個、2 個、3 個、4 個參數(shù)分別表示什么意思？

參考答案

• 1個值： margin {10px;} 表示上右下左
• 2個值： margin {10px 20px ;} 表示上下 左右
• 3個值： margin {10px 20px 30px;} 表示上 左右 下
• 3個值： margin {10px 20px 30px 40px ;} 表示上 右 下 左

94. 處理長寬不固定的元素居中方案？

參考答案

1. 使用 flex-box
2. ele { position: absolute; top: 50%; left: 50%; transform:translate(-50%;-50%);}

95. 三角形如果不使用圖片實現(xiàn)，CSS 如何實現(xiàn)？

參考答案

設置塊級元素寬高為 0，邊框3條設置為透明色。具體可以參閱第 18 題答案

96. 你在工作中是如何使用偽類的？列舉一些常用的偽類以及用途。

參考答案

1. 快速選擇到父元素中某一個子級元素
2. 制作小圖標 icon
3. 清除浮動
4. 使用 :not() 排除一些不想選擇的元素
5. 使用 :nth-child(3n) 可以快速實現(xiàn) “每N個實現(xiàn)XX效果”

97. 列舉 flex 布局在你的實際項目里的使用，它能很方便的幫你做一些什么事情？

參考答案

flex 是根據(jù)主軸和交叉軸的方向來對元素進行排列，在不固定寬高的情況下可以很方便的幫助我們進行布局、居中、控制對齊方式。

98. 如何將大量可變化的圖片顯示到頁面并不影響瀏覽器性能？

參考答案

使用圖片懶加載。將頁面中未出現(xiàn)在可視區(qū)域的圖片先不做加載，等滾動到可視區(qū)域后，再加載。

99. 圖片與圖片之間默認存在的間距如何去除？

參考答案

1. 將圖片全部脫離文檔流
2. 將圖片父元素設置文字大小為 0

100. 閱讀代碼，計算元素在 W3C 盒模型中的寬度，和在 IE 盒模型中的寬度。

div{width: 100px;padding: 10px;border: 1px solid;margin: 10px;
}

參考答案

• W3C 盒模型中的寬度: width + padding + border = 122px
• IE 盒模型中的寬度： 100px

101. 兩個相鄰兄弟元素如代碼所示，此時兩個元素之間的間隔是多少？

<div style="margin-bottom: 20px;"></div>
<div style="margin-top: 10px;"></div>

參考答案

20px，由于兩個元素見發(fā)生了外邊距塌陷，所以中間的間隔就是取其中較大的值。

102. 不使用 border 屬性，使用其他屬性模擬邊框。

參考答案

使用 outline 或 box-shadow 都可以模擬出邊框。

103. 閱讀代碼，計算 ul 的高度。

 <ul style="overflow: hidden;"><li style="height: 100px; float: left;"></li></ul>

參考答案

ul 的高度為 100px，雖然子級 li 浮動會造成父元素 ul 的高度塌陷，但父元素觸發(fā)了 BFC，所以高度可以自動找回。

104. 有哪些方式可以將 p 文字設置為紅色？

參考答案

1. color: red;

2. color: #f00;

3. color: #FF0000;

4. color: rgb(255, 0, 0);

5. color: hsl(120, 100%, 50%);

105. 如何使用媒體查詢實現(xiàn)視口寬度大于 320px 小于 640px 時 div 元素寬度變成 30%？

參考答案

@media screen and (min-width: 320px) and (max-width: 640px){
div{width: 30%;
}
}

106. 什么是 HTML 實體？

參考答案

即對當前文檔的編碼方式不能包含的字符提供一種轉(zhuǎn)義表示。例如對于 “>” 符號，它是 HTML 元素的一部分，如果要在文檔中顯示就需要進行轉(zhuǎn)義為“>”。

107. 什么是全局屬性？列舉兩個全局屬性。

參考答案

全局屬性 Global Attribute 指全部元素都能使用的通用屬性，與之對應的是局部屬性 Local Attribute 。class、contenteditable、onclick、data- 都是全局屬性。

108. 什么是 hasLayout? 觸發(fā) hasLayout 會有什么后果？

參考答案

hasLayout 是微軟的一個私有概念，類似于 BFC ，能夠運行在早期的 IE6、7 當中，但在 IE8+ 已被拋棄。在早期 IE 瀏覽器中，元素會被分為：擁有布局（hasLayout）和沒有布局，擁有布局的元素就可以控制自己內(nèi)容的尺寸和位置，沒有布局的元素需要由最近的擁有布局的祖先元素代勞。

IE6 中很多 bug 都是由于元素沒有布局所引起的，例如浮動元素會擁有雙倍外邊距?？梢酝ㄟ^定義特定的屬性來觸發(fā) lasLayout：

1. float 為 left 或 right
2. position 為 absolute
3. width height 不為 auto
4. zoom 不為 normal

109. 在定位屬性 position 中，哪個值會脫離文檔流?

參考答案

absolute、fixed。

110. 假設視口的寬是 70px，高為 50px，執(zhí)行下面代碼后，div 元素的寬度為多少？

 <style>section{margin: 6px;}div{width: 50vw;height: 50vh;}</style><section><div></div></section>

參考答案

vw 和 vh 單位，1vw 等于視口寬度的 1/100，1vh 等于視口高度的 1/100，即 1vw = 0.7px，1vh = 0.5px，0.7*50 = 35px，0.5*50 = 25px ，即 div 寬度為35px，高度25px。

111. 偽元素 ::before 和 :before 有什么區(qū)別？

參考答案

作用相同，但 CSS3 規(guī)范中為了區(qū)分偽類和偽元素，將 :before 改為了 ::before。

112. cale( ) 函數(shù)是什么？有什么作用？

參考答案

是 CSS 的一個函數(shù)，只有一個數(shù)學表達式參數(shù)，可處理數(shù)學運算，并且在表達式中可混用不同的單位。例如

div{
width: cale(80% - 20px);
}

113. :first-child 和 :first-of-type 有什么不同？

參考答案

• 偽類 :first-child 表示父元素第一個子元素，只要這個元素是在第一個位置就會被匹配。
• 偽類 :first-of-type 表示父元素中第一個相同類型的子元素，這個類型得是相同的元素名。

例如：

<div>
<span>第一個 sapn 元素</span>
<p>第一個 p 元素</p>
<p>第二個 p 元素</p>
</div>

/*匹配第一個 span*/
div :first-child{}
/*匹配第一個 p*/
div p:first-child{}

114. 什么叫 web 安全色？

參考答案

在過去，顯示器性能比較落后最多支持 256 種顏色，其中 40 種被操作系統(tǒng)作為了保留色，剩下 216 種就是安全色。安全色就指在各種平臺下顯示效果與預期一致，如果不是安全色，那么操作系統(tǒng)可能在處理顏色時產(chǎn)生抖動（混合幾種顏色，模擬出系統(tǒng)沒有的顏色），這樣就會造成顏色在不同平臺中顯示出色差。

115. 在 CSS 中，background-color: transparent 和 opacity: 0 有什么區(qū)別？

參考答案

transparent 關(guān)鍵字相當于 rgba(0,0,0,0,)，作為 background 的屬性值僅僅是將元素的背景色設置為透明，而元素中的內(nèi)容還可以被顯示。opacity 則會將元素和內(nèi)容當作一個整體，全部透明。

116. 閱讀代碼分析 p 元素的字體大小。

 <style>section{font-size: 32px;}section>div{font-size: 50%;}</style><section><div><p>lorem</p></div></section>

參考答案

16px，因為 font-size 具有繼承性。

117. @font-face 有什么作用？

參考答案

以前，CSS 只能使用操作系統(tǒng)中安裝的字體，自從引入了 @font-face 允許使用在線字體，能將放置在服務器上的自定義字體嵌入到頁面中，這個字體也可以是矢量圖標。

118. 絕對定位和浮動有什么異同？

參考答案

1. 都會脫離文檔流，改變元素盒子類型，將元素變?yōu)閴K級
2. 都會創(chuàng)建 BFC
3. 不同點在于對包含塊的定義、兄弟元素間的影響、可擺放的位置、能否設置 z-index

119. 字體風格 font-style 的關(guān)鍵字有兩個：italic 和 oblique 它們有什么區(qū)別？

參考答案

• italic 會對文字的結(jié)構(gòu)有改動，得到一種傾斜字體
• oblique 不會修改文字結(jié)構(gòu)，僅僅是傾斜字體
• 如果不存在 italic 的變形字體 italic 的功能將會與 oblique 相同

120. 文本“強制換行”的屬性是什么？

參考答案

word-break: break-all;

121. 閱讀代碼，分析最終執(zhí)行結(jié)果 div 的水平、垂直位置距離。

 div{width: 200px;height: 100px;padding: 10px;transform: translate(50%, 50%);}

參考答案

水平位移 110px 垂直位移 60px。水平方向參照的是元素的寬度，處置方向參照的是元素的高度。HTML 元素默認都以標準盒模型，當元素存在內(nèi)邊距，計算時還要包含內(nèi)邊距。即 220 的 50% 和 120 的 50%。

122. 設置了元素的過渡后需要有觸發(fā)條件才能看到效果，列舉出可用的觸發(fā)條件。

參考答案

1. :hover 、:checked 等偽類
2. 媒體查詢，當改變窗口尺寸觸發(fā)
3. js 觸發(fā)，用腳本更改元素樣式

123. 怎樣把背景圖附著在內(nèi)容上？

參考答案

background-attachment: fixed;

124. CSS 優(yōu)化、提高性能的方法有哪些？

參考答案

1. 最好使用表示語義的名字。一個好的類名應該是描述他是什么而不是像什么
2. 避免 !important，可以選擇其他選擇器
3. 使用緊湊的語法
4. 避免不必要的命名空間
5. 盡可能的精簡規(guī)則，你可以合并不同類里的重復規(guī)則

125. 網(wǎng)頁中應該使用奇數(shù)還是偶數(shù)的字體？

參考答案

偶數(shù)。偶數(shù)字號相對更容易與 web 設計的其他部分構(gòu)成比例關(guān)系， windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16px 這3個大小的點陣，而奇數(shù)時是用的是小一號的點。即每個字占的空間大了 1px 但點陣沒有變，于是略顯稀疏。

126. margin 和 padding 分別適合什么場景使用？

參考答案

• 使用 margin：需要在 border 外側(cè)添加空白、空白處不需要背景色、上下相連的兩個盒子之間的空白，需要相互抵消時。
• 使用 padding: 需要在 border 內(nèi)側(cè)添加空白、空白處需要背景色

127. 對于 line-height 是如何理解的？

參考答案

• 行高指一行文字的高度，兩行文字間基線與基線之間的距離。在 CSS 中，起高度作用的是 height 和 line-height
• 使用行高等于高的方式可以實現(xiàn)單行文字垂直居中
• 將 display 設置為 inline-block 可以實現(xiàn)多行文本居中

128. 如何讓 Chrome 支持小于 12px 的文字？

參考答案

可以配合 CSS3 中的 transform 屬性來實現(xiàn)，例如：

p{
font-size: 10px;
-webkit-transform: scale(0.8);
}

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

參考答案

多數(shù)顯示器默認頻率是 60Hz，即 1s 刷新 60 次，理論上最小間隔為 1/60*1000ms = 16.7s

130. 簡述 png、jpg、gif 這些圖片格式的適用場景，有沒有了解過 webp?

參考答案

• png 是便攜式網(wǎng)絡圖片，一種無損數(shù)據(jù)壓縮位圖，優(yōu)點：壓縮比高，色彩好。 大多數(shù)地方都可以用。
• jpg 是一種針對相片使用的一種有損的壓縮格式，在色調(diào)及顏色平滑變化做的不錯。常被用來儲存和傳輸照片的格式。
• gif 是一種位圖文件格式，以8位色重現(xiàn)真色彩的圖像?？梢詫崿F(xiàn)動畫效果。
• webp 格式是谷歌在2010年推出的圖片格式，壓縮率只有 jpg 的2/3，大小比 png 小了45%。缺點是壓縮的時間更久了，兼容性不好，目前只有 Google 和 opera 支持。

131. style 標簽寫在 body 后面與 body 前面有什么區(qū)別？

參考答案

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

132. 闡述一下 CSS Sprites

參考答案

將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用 CSS 的 background-image、background- repeat、background-position 的組合進行背景定位。利用 CSS Sprites 能很好地減少網(wǎng)頁的 http 請求，從而大大的提高頁面的性能；還能減少圖片的字節(jié)。

133. 寫出背景色漸變的 CSS 代碼

參考答案

線性漸變

background: linear-gradient(direction,color-stop1,color-stop2,...);

• direction：用角度值指定漸變的方向(或角度)；

• color-stop1,color-stop2,…：用于指定漸變的起止顏色

徑向漸變

CSS 徑向顏色漸變(Radial Gradients)跟線性漸變(linear gradients)不一樣，它不是沿著一個方向漸變，而是以一個點為中心，向四周輻射漸變。

語法：

background-image: radial-gradient([<position> || <angle>]，[<shape> || <size>]，<stop>，<stop>，<stop>)

134. 寫出添加下劃線的 CSS 代碼

參考答案

一般有兩種方法：

• 通過 CSS 下劃線代碼：text-decoration:underline 來設置文字下劃線。
• 通過設置 div 的 border 實現(xiàn)效果

135. 寫出讓對象順時針旋轉(zhuǎn) 90 度的 CSS 代碼（最好附帶動畫效果）

參考答案

順時針旋轉(zhuǎn)可以使用 CSS3 新增的 transform 屬性，屬性值對應 rotate(90deg)，如果要附帶動畫效果，那么可以添加 transition 過渡。下面是一段示例代碼：

<div></div>

div{
width: 100px;
height: 100px;
background-color: red;
transition: all 1s;
}
div:hover{
transform: rotate(90deg);
}

136. CSS 優(yōu)先級順序正確的是（ ）

A. !important > class > id > tag

B. !important > tag > class > id

C. !important > id > class > tag

D. Class > !important > id > tag

參考答案

選 C

解析：

關(guān)于 CSS 選擇器的優(yōu)先級，具體可以參閱下圖：

137. 如何產(chǎn)生帶有正方形項目的列表

A. type:square

B. type:2

C. list-style-type:square

D. list-type:square

參考答案

C

解析：

CSS list-style-type 屬性可以設置不同的列表樣式

具體屬性值可以參閱：https://www.w3school.com.cn/cssref/pr_list-style-type.asp

138. 手寫一個三欄布局，要求：垂直三欄布局，所有兩欄寬度固定，中間自適應

參考答案：

這是一道經(jīng)典的面試題，實現(xiàn)的方式很多，這里列舉兩種。

方法一：flexbox 的解決方案

<body><!-- flexbox解決方案 --><section class="layout flexbox"><article class="left-center-right"><div class="left"></div><div class="center"><h1>flexbox的解決方案</h1><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div><div class="right"></div></article></section>
</body>

<style>
.layout.flexbox {
margin-top: 140px;
}.layout.flexbox .left-center-right {
display: flex;
}.layout.flexbox .left {
width: 300px;
background: red;
}.layout.flexbox .center {
flex: 1;
background: yellow;
}.layout.flexbox .right {
width: 300px;
background: blue;
}
</style>

方法二：網(wǎng)格布局解決方案

<body><!-- 網(wǎng)格布局的解決方案     --><section class="layout grid"><article class="left-center-right"><div class="left"></div><div class="center"><h1>網(wǎng)格布局的解決方案</h1><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div><div class="right"></div></article></section>
</body>

<style>
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}.layout.grid .left {
background: red;
}.layout.grid .center {
background: yellow;
}.layout.grid .right {
background: blue;
}
</style>