整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
**2024 高頻前端面試題匯總之CSS篇（二）**
**引言：**
在Web前端領域，CSS作為視覺呈現的靈魂，一直是各大公司面試考核的重點之一。為了幫助廣大前端開發者充分準備即將到來的面試，本文將繼續盤點2024年高頻CSS面試題目，并通過詳盡的解析與實例代碼，帶您鞏固和拓展CSS知識體系，提升面試成功率。
## **一、CSS布局進階**
**題目1：Flexbox布局的基本原理與應用場景**
**解答：**
Flexbox布局（彈性盒布局）是一種現代化的CSS布局方式，通過`display: flex`聲明父元素為彈性容器，然后通過一系列相關的屬性（如`flex-direction`、`justify-content`、`align-items`等）對子元素進行靈活的定位與尺寸分配。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
flex-direction: row; /* 主軸方向，默認為水平 */
justify-content: space-around; /* 主軸上的對齊方式 */
align-items: center; /* 交叉軸上的對齊方式 */
}
.box {
flex: 1; /* 子元素按比例分配空間 */
border: 1px solid black;
padding: 1em;
margin: 0.5em;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
```
**題目2：Grid布局的特點與難點**
**解答：**
CSS Grid布局提供了一個二維網格系統，用于定義行與列，并精確放置和對齊項目。相較于Flexbox，Grid布局更適合處理復雜的二維布局問題。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 創建3等寬的列 */
grid-gap: 10px; /* 設置行與列之間的間距 */
}
.grid-item {
border: 1px solid black;
padding: 1em;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<!-- ... 更多網格項 -->
</div>
</body>
</html>
```
## **二、CSS選擇器與優先級**
**題目3：CSS選擇器的層級關系與權重計算**
**解答：**
CSS選擇器的優先級由內聯樣式（1000）、ID選擇器（100）、類選擇器（10）、屬性選擇器（10）、偽類（10）、元素選擇器（1）和通用選擇器（0）依次遞減。當多個選擇器應用于同一元素時，優先級高的規則生效。
```css
/* 例子：優先級比較 */
#id .class[attr] p:hover {
color: red; /* 優先級：1013 */
}
.class p {
color: blue; /* 優先級：11 */
}
```
## **三、CSS單位與響應式設計**
**題目4：rem、em與vw/vh單位在響應式設計中的應用**
**解答：**
- `rem`是相對于根元素（通常是`html`）的字體大小的單位，便于實現整體布局的響應式調整。
- `em`是相對于父元素字體大小的單位，常用于局部相對單位的設定。
- `vw/vh`分別代表視窗寬度和高度的百分比，適合創建完全依賴視口大小的響應式設計。
```css
/* 示例 */
html {
font-size: 16px; /* 根元素字體大小 */
}
.container {
width: 80%; /* 百分比單位 */
}
.title {
font-size: 2rem; /* 相對于根元素字體大小 */
}
.subtitle {
font-size: 1.2em; /* 相對于父元素字體大小 */
}
.hero-image {
width: 100vw; /* 占滿整個視口寬度 */
height: 50vh; /* 占視口高度的一半 */
}
```
## **四、CSS性能優化**
**題目5：如何優化CSS以提高渲染性能？**
**解答：**
- 減少CSS文件體積，通過合并、壓縮和精簡CSS代碼。
- 采用現代CSS特性替代舊有的布局和定位方式，如Flexbox和Grid布局。
- 避免過于復雜的選擇器，減少CSS解析時間和渲染性能損耗。
- 使用媒體查詢優化不同設備的加載與渲染，實現按需加載CSS。
- 利用CSS3硬件加速屬性（如`transform`和`will-change`）提高動畫性能。
以上只是部分CSS高頻面試題的解析與示例，希望能幫助您在面試前全方位地復習和掌握CSS的核心知識點。持續關注本系列教程，我們將持續提供更多有價值的前端面試攻略，助您在職業生涯中乘風破浪，披荊斬棘！
一篇文章，小編結合自己的實際和各種面試經歷總結整理了一些比較重點和常用的CSS知識點，大伙可以邊看邊動手寫一寫，實踐是檢驗真理的唯一標準嘛。
1.px (pixel，像素)
是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI(Dots Per Inch，每英寸像素數)，在掃描打印時一般都有DPI可選。Windows系統默認是96dpi，Apple系統默認是72dpi。
2.em(相對長度單位，相對于當前對象內文本的字體尺寸)
是一個相對長度單位，最初是指字母M的寬度，故名em。現指的是字符寬度的倍數，用法類似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
3.rem(root em，根em)
rem是一個相對單位，1rem等于html元素上字體設置的大小。我們只要設置html上font-size的大小，就可以改變rem所代表的大小。這樣我們就有了一個可控的統一參考系。我們現在有兩個目標：
rem與em的區別：
4.vw、vh
css3中引入了一個新的單位vw/vh，與視圖窗口有關，vw表示相對于視圖窗口的寬度，vh表示相對于視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。各個單位具體的含義如下：
這里我們發現視窗寬高都是100vw／100vh，那么vw或者vh，下簡稱vw，很類似百分比單位。vw和%的區別為：
圣杯布局與雙飛翼布局針對的都是三列左右欄固定中間欄邊框自適應的網頁布局
1.相對布局
.container { width: 100%; min-height: 300px; padding: 0 60px; box-sizing: border-box;}
.container > div { position: relative; float: left;}
.left, .right { width: 60px; height: 100%;}
.left { left: -60px; margin-left: -100%;}
.right { right: 0; margin-right: -100%;}
.main { width: 100%; height: 100%;}
2.flex布局
.container {
width: 100%;
min-height: 300px;
display: flex;
}
.main {
flex-grow: 1;
}
.left {
order: -1;
flex-basis: 60px;
}
.right {
flex-basis: 60px;
}
3.絕對布局
.container {
width: 100%;
min-height: 300px;
position: relative;
}
.container > div {
position: absolute;
}
.left, .right {
width: 60px;
height: 100%;
}
.main {
width: calc(100% - 120px);
height: 100%;
left: 60px;
}
.left {
left: 0;
}
.right {
right: 0;
}
流式布局使用非固定像素來定義網頁內容，也就是百分比布局，通過盒子的寬度設置成百分比來根據屏幕的寬度來進 行伸縮，不受固定像素的限制，內容向兩側填充。
響應式開發利用CSS3 中的 Media Query(媒介查詢)，通過查詢 screen 的寬度來指定某個寬度區間的網頁布局。
由于響應式開發顯得繁瑣些，一般使用第三方響應式框架來完成，比如 bootstrap 來完成一部分工作，當然也 可以自己寫響應式。
CSS 中的 transform，transition 和 animation 是分開的三部分內容，其中 transfrom 主要是控制元素變形，并沒有一個時間控制的概念，而 transition 和 animation 才是動畫的部分，它們可以控制在一個時間段里，元素在兩個或以上的狀態切換的效果。
1.transition
transition 屬性：
transition 相關的事件
transitionend 事件會在 transition 動畫結束的時候觸發。通常我們會在動畫結束后執行一些方法，例如繼續下一個動畫效果或者其他。Zepto.js 中的動畫方法都是使用 CSS 動畫屬性來處理，而其中動畫運行后的回調便應該是使用這個事件來處理。
2.animation
雖然 transition已經提供了很棒的動畫效果了，但是我們只能夠控制從一個狀態到達另外一個狀態，沒法來控制多個狀態的不斷變化，而 animation 而幫助我們實現了這一點。使用 animation 的前提是我們需要先使用 @keyframes 來定義一個動畫效果，@keyframes 定義的規則可以用來控制動畫過程中的各個狀態的情況，語法大抵是這個樣子：
@keyframes test {
from { left: 0; top: 0; }
to { left: 100%; top: 100%; }
}
@keyframes 關鍵詞后跟動畫的名字，然后是一個塊，塊中有動畫進度的各個選擇器，選擇器后的塊則依舊是我們常見的各個 CSS 樣式屬性。
animation 屬性:
由于 animation 提供了循環的控制，所以還有兩個值是 alternate 和 alternate-reverse，這兩個值會在每次循環開始的時候調轉動畫方向，只不過是起始的方向不同。
animation 相關事件
可以通過綁定事件來監聽 animation 的幾個狀態，這些事件分別是：
BFC全稱是Block Formatting Context，即塊格式化上下文。它是CSS2.1規范定義的，關于CSS渲染定位的一個概念。要明白BFC到底是什么，首先來看看什么是視覺格式化模型。
視覺格式化模型
視覺格式化模型(visual formatting model)是用來處理文檔并將它顯示在視覺媒體上的機制，它也是CSS中的一個概念。
視覺格式化模型定義了盒（Box）的生成，盒主要包括了塊盒、行內盒、匿名盒（沒有名字不能被選擇器選中的盒）以及一些實驗性的盒（未來可能添加到規范中）。盒的類型由display屬性決定。
怎樣才能形成BFC
根元素或其它包含它的元素；
浮動 (元素的float不為none)；
絕對定位元素 (元素的position為absolute或fixed)；
行內塊inline-blocks(元素的 display: inline-block)；
表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；
overflow的值不為visible的元素；
彈性盒 flex boxes (元素的display: flex或inline-flex)；
但其中，最常見的就是overflow:hidden、float:left/right、position:absolute。也就是說，每次看到這些屬性的時候，就代表了該元素已經創建了一個BFC了。
瀏覽器對BFC區域的約束規則：
BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素，反之亦然。我們可以利用BFC的這個特性來做很多事。
基本概念
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
容器的屬性：
1.flex-direction： 屬性決定主軸的方向（即項目的排列方向）
2.flex-wrap ：默認情況下，項目都排在一條線（又稱"軸線"）上
3.flex-flow：是flex-direction屬性和flex-wrap屬性的簡寫形式
4.justify-content：定義了項目在主軸上的對齊方式
5.align-items：定義項目在交叉軸上如何對齊
6.align-content：定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用
項目的屬性
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
grid 布局是 css 中的一種新的布局方式，對盒子和盒子內容的位置及尺寸有很強的控制能力。與 flex 不同，flex 著重于單軸，而 grid 適應于多軸，下面就來做個簡單的介紹。
flex 布局示意
grid 布局示意
基本概念
設置 display: grid; 的元素稱為容器，它的直接子元素稱為項目，但注意子孫元素不是項目。
容器屬性
grid 容器的屬性還是有點多的，一共有 18 個，但是很多可以通過簡寫完成，所以也不用太緊張。
設置CSS盒模型為標準模型或IE模型。標準模型的寬度只包括content，而IE盒模型包括border和padding，box-sizing屬性可以為三個值之一：
有時候動畫可能會導致用戶的電腦卡頓，你可以在特定元素中使用硬件加速來避免這個問題：
.block {
transform: translateZ(0);
}
你并不會察覺有什么不同，但瀏覽器會為這個元素進行3D硬件加速，在will-change這個特殊屬性未被全面支持之前，這個方法還是很有用的。
這里總結CSS中比較常用也是比較重要的十三個知識點，內容比較多，希望大伙能多看多寫，好的程序員是寫出來的，這也算是小編對自己的激勵吧。
oder
這是接上一篇JS篇的內容，沒有看到的朋友可以關注我們，在找對應的文章。
吐槽幾句：前幾天自己在掘金發布了倆篇自己畢業找工作的面試總結，小火了一把之后...沒想到評論區炸開了，有diss我的，也有支持我的。更有的伙伴們特地到我們的公眾號（IT面試填坑小分隊）留言謝謝我們，這讓我保持了動力，因為每次文章的更新對于我來說都是一次鞭策，讓我寫了一天需求回家之后沒有懈怠，繼續保持學習狀態。
我的掘金：https://juejin.im/user/5b4ca7c76fb9a04fd55ac00d/posts
有經驗、想指導的：可以留言指導，你的指導都可以幫助我和看官們少走一些彎路，我們都會由衷感謝您，
和我一樣剛畢業的童鞋們: 我們可以一塊交流，不同的見解可能碰撞出美妙的答案。
準備入行、準備面試的童鞋們，希望你們不要單純的去背面試題，學會理解知識，行業浮躁但是行業中的我們不要浮躁。背一道題你只會一道，理解一道題、一個知識點可以幫你會做一個類型的題，后者更累可是效率也更高，希望馬上要實習或者校招的你們有一個好的未來。加油！
話不多說~~
BFC的內容需要好好理解、一般會結合實際問題：比如margin重疊問題。
結合上個問題。元素的padding是相對于父元素的寬度來計算的，那么答案是不是一目了然。還有一個答案可以參考下一個問題。
針對于萬一讓你說兩種情況或者flex布局你緊張的遺忘了，請大膽使用圣杯布局與雙飛燕布局大法。
親身經歷過一小段時間的rem布局，可以了解一下Retina屏，以及一些物理像素的知識，淘寶的無限適配可以了解一下，媒體查詢也不要忘記。
這個問題涉及一個渲染層的內容。如果回答出來可能順勢就問到如何創建一個渲染層。
對于瀏覽器重拍重繪問題不再這里討論了，我還得捋一捋忘的厲害，在以后繼續學習瀏覽器性能方面一定會再拿出來討論。
上面這個小籮筐問題相對來說，見的應該已經很多了。而且是真的出現在自己平時的學習與做的小項目中，我也就就不多提了，也不確定面試會不會問。
這些css問題在我看來使用率是真的很高的。移動端rem布局、flex布局、css動畫、高度寬度百分比問題。尤其是在接觸與vue、react這種框架一塊使用的UI庫比如element-ui以及ant-desgin你沒有這些知識，沒有這些知識的儲備想要修改這些UI庫的樣式達到自己想要的效果就很難了。css是一個黑魔法，知識可以說是無窮無盡，希望大家正視它。
雖然做的是面試題的總結。但是每每回想這些面試題的內容，我就在考慮這些知識是不是很難一蹴而就、一學就會的？好像是。 做為一名剛入行的小白菜前端，每天做著產品經理給的需求，除了周六日（雙休的公司還蠻幸福的）已經很難找到大塊時間去學習了，周六周天想要打磨自己的基礎，但是一想上了五天班看什么書，玩去咯。每一項基礎知識都在改變你寫代碼的習慣。當你知道translate會創建新的層的時候，不考慮兼容的話，你就會更多的使用它。當你了解了重排重繪的原因，你有意回避這些的出現，你的項目流暢性就會越來越好，扎實的基礎真的可以幫助你更合理的考慮問題與編碼。扯遠了扯遠了，愿每一位看官看完這一段雞湯有一個好心情。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
