2022高頻前端面試題——CSS篇

??最近準備換工作了，所以整理了一些前端高頻大廠面試題，分享給大家，如有問題歡迎留言指正，面試專欄我會長期更新，歡迎大家點贊??、收藏??，關(guān)注?，感謝！

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

?? 參考回答：

px全稱pixel像素，是相對于屏幕分辨率而言的，它是一個絕對單位，但同時具有一定的相對性。因為在同一個設(shè)備上每個像素代表的物理長度是固定不變的，這點表現(xiàn)的是絕對性。但是在不同的設(shè)備之間每個設(shè)備像素所代表的物理長度是可以變化的，這點表現(xiàn)的是相對性

em是一個相對長度單位，具體的大小需要相對于父元素計算，比如父元素的字體大小為80px，那么子元素1em就表示大小和父元素一樣為80px，0.5em就表示字體大小是父元素的一半為40px

2. vw、vh 是什么？

?? 參考回答：

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

3. ?介紹下?BFC?及其應(yīng)用

?? 參考回答：

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

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

• 設(shè)置浮動
• overflow?設(shè)置為?auto、scroll、hidden
• positon?設(shè)置為?absolute、fixed

常見的?BFC?應(yīng)用有：

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

4. 介紹下 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ū)域以彈性盒的形式來格式化

5. 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。

6. 分析比較 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，通過設(shè)置visibility: visible;可以讓子孫節(jié)點顯式。

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

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），瀏覽器會通過重新復(fù)合（recomposite）來形成一個新的幀。

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

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

?? 參考回答：

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

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

• 該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。
• 當(dāng)元素在容器中被滾動超過指定的偏移值時，元素在容器內(nèi)固定在指定位置。亦即如果你設(shè)置了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：設(shè)置動畫將如何完成一個周期
• animation-delay：設(shè)置動畫在啟動前的延遲間隔
• animation-iteration-count：定義動畫的播放次數(shù)
• animation-direction：指定是否應(yīng)該輪流反向播放動畫
• animation-fill-mode：規(guī)定當(dāng)動畫不播放時（當(dāng)動畫完成時，或當(dāng)動畫有一個延遲未開始播放時），要應(yīng)用到元素的樣式
• animation-play-state：指定動畫是否正在運行或已暫停

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

?? 參考回答：

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

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

?? 參考回答：

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

• PNG 8：PNG 8中的8，其實指的是8bits，相當(dāng)于用2^8（2的8次方）大小來存儲一張圖片的顏色種類，2^8等于256，也就是說PNG 8能存儲256種顏色，一張圖片如果顏色種類很少，將它設(shè)置成PNG 8得圖片類型是非常適合的。
• PNG 24：PNG 24中的24，相當(dāng)于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，相當(dāng)于PNG 24 加上 8bits的透明顏色通道，就相當(dāng)于R（紅）、G（綠）、B（藍）、A（透明）。R(0~255),G(0~255),B(0~255),A(0~255)。比PNG 24多了一個A（透明），也就是說PNG 32能表示跟PNG 24一樣多的色彩，并且還支持256種透明的顏色，能表示更加豐富的圖片顏色類型。

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

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

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

?? 參考回答：

可以利用 border 屬性

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

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

示例代碼如下：

<div>div>

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

15. 如何實現(xiàn)一個自適應(yīng)的正方形

?? 參考回答：

「方法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;
}

16. 清除浮動的方法

?? 參考回答：

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

• 給浮動元素父級設(shè)置高度

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

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

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

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

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

?? 參考回答：

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

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

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

?? 參考回答：

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

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

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

?? 參考回答：

重排: ?部分渲染樹（或者整個渲染樹）需要重新分析并且節(jié)點尺寸需要重新計算，表現(xiàn)為重新生成布局，重新排列元素

重繪: ?由于節(jié)點的幾何屬性發(fā)生改變或者由于樣式發(fā)生改變，例如改變元素背景色時，屏幕上的部分內(nèi)容需要更新，表現(xiàn)為某些元素的外觀被改變

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

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

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

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

?? 參考回答：

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

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

3. 小圖使用 base64 格式

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

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

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

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

?? 參考回答：

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

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

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

22. 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
• 多列布局
• 媒體查詢

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

?? 參考回答：

隱藏類型

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

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

完全隱藏

(1) display 屬性

?display:?none;

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

<div?hidden>div>

視覺上的隱藏

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

position:absolute;
left:?-99999px;

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

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

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

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

語義上隱藏

aria-hidden 屬性

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

"true"></div>