這兩年面試別人的時候有個特別穩(wěn)定的觀察很多人簡歷上寫著“精通CSS”結(jié)果第一個問題問“標(biāo)準(zhǔn)盒模型和怪異盒模型什么區(qū)別”能講完整的人居然不到三成。不是知識點(diǎn)多難而是大部分人都停留在“能用”的層面背過、用過但從來沒深想過“為什么”?！扒岸税斯晌摹边@個詞被吐槽了很久但CSS這個方向我反而覺得“八股”是有價值的底子。CSS的坑大多藏在底層機(jī)制里——布局錯位、樣式覆蓋不生效、動畫掉幀幾乎都指向同一個問題對盒模型、層疊、渲染原理理解不透。這份CSS核心面試題庫是我結(jié)合自己面試官視角和一線開發(fā)經(jīng)驗(yàn)整理的覆蓋布局、選擇器、視覺、動效、工程化等常見考點(diǎn)。每個題都寫了參考答案、考察意圖和追問方向也順手記錄了一些真實(shí)的翻車現(xiàn)場。不管你是準(zhǔn)備2026年的前端面試還是要帶新人、做技術(shù)評審這份清單都可以直接拿來用。1. CSS面試想考察的底層能力1.1 為什么前端面試?yán)@不開CSS有些同學(xué)會低估CSS在面試?yán)锏姆至坑X得前端面試重點(diǎn)是JS、框架、算法。但實(shí)際上面試官問CSS很少是為了湊時長而是在用一個低成本的方式判斷候選人的“技術(shù)底色”。CSS雖然不像JS那樣有復(fù)雜的邏輯但它有自己的一套計(jì)算體系——層疊、優(yōu)先級、格式化上下文、渲染管線這些東西恰恰最能暴露一個人是“用過”還是“真正理解”。另一個現(xiàn)實(shí)原因是CSS問題在日常開發(fā)里出現(xiàn)頻率極高。UI還原度差、布局兼容性崩了、樣式死活改不動、動畫卡成PPT這些場景幾乎每個項(xiàng)目都會遇到。面試官問CSS本質(zhì)上是在模擬這些真實(shí)問題看候選人有沒有系統(tǒng)的排查思路。問“flex: 1是什么意思”不是考背誦而是看你知不知道子元素寬度是怎么參與計(jì)算的將來容器寬度一變布局會不會塌。1.2 面試官真正在看什么同樣是答對一道CSS題不同水平的候選人給出的答案完全不是一個量級。拿“如何實(shí)現(xiàn)水平垂直居中”來說初級候選人會背出“flex布局justify-content: center; align-items: center”這算及格。但面試官會繼續(xù)追問如果父容器高度不固定呢如果不方便修改父容器呢如果子元素尺寸不固定呢每個條件下方案選擇會完全不同。面試官真正在意的其實(shí)是四件事第一概念邊界是否清楚比如“塊格式化上下文”和“普通流”的關(guān)系第二方案選型是否有理由為什么用Grid而不是Flex為什么用transform而不是margin第三邊界情況是否考慮過比如子元素數(shù)量不定、內(nèi)容超長、容器寬度極小第四排查問題的思路是否清晰樣式不生效的時候是從選擇器優(yōu)先級查還是從層疊順序查。這四點(diǎn)里任何一點(diǎn)能講深都比背下二十道題有價值。在面試中把“為什么選這個方案”講清楚往往比直接給出答案更能拿到高分。2. 盒模型與布局面試必問的三板斧2.1 標(biāo)準(zhǔn)盒模型和怪異盒模型的區(qū)別這是CSS面試題里最經(jīng)典的一道也是最容易被輕視的一道。標(biāo)準(zhǔn)盒模型content-box和怪異盒模型border-box的核心區(qū)別在于 width 屬性到底包含哪些部分。標(biāo)準(zhǔn)盒模型下width 只表示內(nèi)容區(qū) content 的寬度padding 和 border 會額外向外擴(kuò)張而怪異盒模型下width 表示內(nèi)容區(qū)、padding、border 三者的總寬度內(nèi)容區(qū)會被壓縮。舉個實(shí)際例子一個 div 設(shè)置 width: 200pxpadding: 20pxborder: 4px。在 content-box 下它占據(jù)的總寬度是 200 202 42 248px在 border-box 下總寬度就是 200px內(nèi)容區(qū)被壓縮到 152px。這聽起來很簡單但很多布局錯位問題就出在這里——兩張并排卡片各占50%寬度又加了 padding 和 border在標(biāo)準(zhǔn)盒模型下就直接換行了因?yàn)?50% 2px 已經(jīng)超出了容器寬度。項(xiàng)目里最常用的做法是全局切換*, *::before, *::after { box-sizing: border-box; }但這里有個性能細(xì)節(jié)值得注意通配符選擇器會把所有元素都命中一遍在大型項(xiàng)目里會帶來樣式計(jì)算開銷。很多框架直接把 box-sizing 寫在 reset 或 normalize 里如果你自己寫全局樣式建議用 html、body、button、input 這類實(shí)際會用到的元素選擇器去設(shè)置而不是無腦*。追問環(huán)節(jié)面試官常問“為什么 box-sizing 不是默認(rèn)值”答案很簡單CSS 設(shè)計(jì)之初沒想到 layout 會這么復(fù)雜content-box 只是早期排版模型下的默認(rèn)產(chǎn)物。2.2 flex布局子元素寬度自適應(yīng)的底層邏輯flex 相關(guān)的問題幾乎必考尤其是“flex布局子元素寬度自適應(yīng)”。面試官其實(shí)想看的是你是否理解 flex-grow、flex-shrink、flex-basis 這三個屬性的協(xié)同關(guān)系以及flex: 1這個簡寫到底展開了成什么。先說最容易混淆的一組flex: 1和flex: auto。完整寫法分別是flex: 1 1 0%和flex: 1 1 auto。前者 flex-basis 是 0%意思是所有子元素從零開始按 flex-grow 的比例平分剩余空間后者 flex-basis 是 auto子元素會先按自身內(nèi)容天然寬度占位然后再在剩余空間按比例分配。比如兩個按鈕一個文字長一個文字短用flex: 1它們寬度完全相等用flex: auto文字長的會更寬一些。.container { display: flex; gap: 16px; } .item { /* 等價于 flex: 1 1 0% */ flex: 1; } .item-fixed { /* 不縮放保持固定寬度 */ flex: 0 0 160px; }實(shí)際開發(fā)里需要子元素寬度自適應(yīng)時優(yōu)先用flex: 1配合min-width: 0。為什么強(qiáng)調(diào) min-widthflex 子元素默認(rèn) min-width 是 auto也就是“內(nèi)容不能擠壓到看不全”當(dāng)內(nèi)容超長時子元素會被內(nèi)容撐開反而破壞了自適應(yīng)效果。設(shè)置min-width: 0后子元素就可以被壓縮到小于內(nèi)容寬度再用overflow: hidden或text-overflow: ellipsis處理溢出這才是真正的自適應(yīng)。還有一個高頻追問“flex 容器里子元素的寬度到底由誰決定”完整的答案是先看 flex-basis 決定主軸方向的初始尺寸再結(jié)合剩余空間和 flex-grow / flex-shrink 計(jì)算最終尺寸同時受 min-width / max-width 約束。如果 flex-basis 設(shè)成具體像素比如 300px那子元素初始就是 300px剩余空間再按 grow 比例分配。明白了這個流程任何棘手的寬度問題都能推出來。2.3 從居中發(fā)散開去的布局追問“實(shí)現(xiàn)一個水平垂直居中的元素”這道題三種答法對應(yīng)三個段位。入門答法flex 布局。進(jìn)階答法Grid 布局。高級答法根據(jù)場景選方案并說出每種方案的適用邊界和代價。/* 方案一flex */ .parent { display: flex; align-items: center; justify-content: center; } /* 方案二grid */ .parent { display: grid; place-items: center; } /* 方案三絕對定位 transform */ .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }三種方案里flex 和 grid 的語義清晰、代碼簡潔但前提是父容器尺寸確定或者可以撐開絕對定位加 transform 適合“父容器尺寸不確定、子元素和父元素有層疊關(guān)系”的場景而且 transform 只觸發(fā)合成不觸發(fā)重排性能上反而更好。margin: auto 也可以用但需要同時設(shè)置 top、bottom、left、right 為 0而且僅在定位元素下才能垂直居中。面試官這時一旦追問“如果不用定位也不改父容器能不能居中”基本上是在考察“transform 百分比是相對自身尺寸”這個知識點(diǎn)能答出來就會加分不少。2.4 布局方案對比速查布局方案核心屬性適用場景主要限制普通流margin/padding/float文檔流內(nèi)簡單排列垂直居中麻煩flexdisplay:flex 系列一維布局、自適應(yīng)分配網(wǎng)格對齊能力弱griddisplay:grid 系列二維布局、復(fù)雜網(wǎng)格兼容性要求高心智模型重絕對定位position inset浮動定位、覆蓋層脫離文檔流需計(jì)算位置table 布局display:table舊項(xiàng)目兼容靈活性差不建議新寫這五種方案推薦熟練掌握 flex 和 grid 的組合使用。實(shí)際項(xiàng)目里不太可能只用一種布局完成整張頁面通常導(dǎo)航用 flex內(nèi)容卡片區(qū)域用 grid彈窗用 absolute fixed。面試中能把“每種方案的適用邊界”說清楚比背十個布局代碼塊有用得多。3. 選擇器、優(yōu)先級與層疊機(jī)制3.1 優(yōu)先級計(jì)算不只是數(shù)數(shù)樣式的優(yōu)先級Specificity是很多前端工程師的薄弱區(qū)因?yàn)槿粘ｉ_發(fā)里多數(shù)沖突就靠“后面寫的覆蓋前面”解決了但真正復(fù)雜的選擇器沖突必須精確計(jì)算優(yōu)先級。瀏覽器計(jì)算優(yōu)先級時會按照四個維度累加權(quán)重等級包含內(nèi)容示例1級!importantcolor: red !important2級內(nèi)聯(lián)stylestylecolor: red3級ID選擇器#header4級類、屬性、偽類.nav / [typetext] / :hover5級元素、偽元素div / ::before注意這個權(quán)重表不是“十進(jìn)制加法”說“1000個類也打不過一個ID”是不準(zhǔn)確的。瀏覽器實(shí)際上是按優(yōu)先級級別逐級比較同級數(shù)量多的勝出超過某個數(shù)量后進(jìn)位機(jī)制各瀏覽器實(shí)現(xiàn)不同但大方向是 ID 永遠(yuǎn)壓過類。舉一個實(shí)戰(zhàn)例子#nav .list li:hover { color: blue; } #nav .list .active { color: red; }第一條選擇器含有 1 個 ID、2 個類.list 和 :hover、1 個元素li第二條含有 1 個 ID、2 個類.list 和 .active沒有元素。兩者的 ID 數(shù)和類數(shù)相同但因?yàn)榈谝粭l多了一個元素選擇器實(shí)際上優(yōu)先級已經(jīng)不同第一條在“第5級”上多了 1 個元素所以第一條反而更高。這就是很多人寫樣式覆蓋不了別人的代碼的原因——不是你的規(guī)則沒問題而是對方的優(yōu)先級更高。3.2 BFC能解決哪些實(shí)際問題BFCBlock Formatting Context塊級格式化上下文是面試?yán)飵缀醣乜嫉母拍?。通俗理解BFC就是一個“獨(dú)立的渲染結(jié)界”這個結(jié)界內(nèi)部的布局和外部互不影響。面試時能完整說出BFC是什么、怎么觸發(fā)、解決什么問題CSS的底子基本就過關(guān)了。BFC的觸發(fā)條件很多overflow 非 visible如 hidden、auto、float 非 none、position 是 absolute 或 fixed、display 是 inline-block、flex、grid、table-cell 等。日常開發(fā)里最常用的觸發(fā)方式是overflow: hidden。BFC 最常見的問題場景有三個。第一margin 重疊兩個兄弟元素上面設(shè) margin-bottom: 40px下面設(shè) margin-top: 30px最終間距不是 70px 而是 40px因?yàn)榇怪狈较?margin 會取較大值合并。把其中一個元素放進(jìn)獨(dú)立的 BFC 容器里就能阻止合并。第二浮動高度塌陷子元素 float 后父容器高度變成 0給父容器加 overflow: hidden 觸發(fā) BFC就能把浮動子元素包裹進(jìn)來。第三兩欄自適應(yīng)布局左側(cè)固定寬度 float右側(cè) overflow: hidden 觸發(fā) BFC右側(cè)就不會被左側(cè)浮動覆蓋能自動撐滿剩余空間。3.3 用對選擇器是一門學(xué)問選擇器的考察點(diǎn)主要在兩個方向一是能不能精準(zhǔn)選中目標(biāo)元素二是會不會因?yàn)檫x擇器寫得太大導(dǎo)致性能問題。組合器是面試官喜歡深挖的部分。相鄰兄弟選擇器只選“緊挨著的那一個兄弟元素”通用兄弟選擇器~選“后面所有的兄弟元素”。結(jié)合一個高頻場景有多個兄弟 div想選中某個 div 前面緊鄰的那個兄弟元素。傳統(tǒng)寫法做不到“前面一個”但 CSS :has() 可以。/* 選中后面緊跟著 p 的 div */ div:has( p) { background: #f5f5f5; } /* 選中所有后面有 p 的 div */ div:has(~ p) { border: 1px solid #ddd; }:has()在面試?yán)锸莻€很好的加分項(xiàng)它的瀏覽器兼容性在2023年以后已經(jīng)非常好了可以在生產(chǎn)環(huán)境放心使用。另外偽類和偽元素的區(qū)別也是高頻題偽類是元素的某種狀態(tài):hover、:first-child偽元素是創(chuàng)建了一個虛擬元素::before、::after?？捶柧湍軈^(qū)分單冒號是偽類雙冒號是偽元素這個細(xì)節(jié)答對了能讓面試官覺得你基礎(chǔ)很扎實(shí)。4. 視覺效果與動效面試題4.1 漸變與字體效果的實(shí)現(xiàn)細(xì)節(jié)CSS 漸變是視覺效果題里的?？陀绕涫蔷€性漸變和字體漸變。線性漸變的第一個參數(shù)是方向可以用角度或關(guān)鍵字第二個參數(shù)開始是顏色和位置。面試中常問的是“漸變顏色百分比是什么意思”比如linear-gradient(90deg, #f60 0%, #ff0 50%, #0f0 100%)這個百分比表示顏色切換的位置30% 處才開始變第二種顏色之前全是第一種。字體漸變是個實(shí)際開發(fā)里非常常用的效果實(shí)現(xiàn)方式比較 hack——先給文字設(shè)置背景漸變再把背景裁剪到文字上同時把文字顏色設(shè)為透明。.gradient-text { background: linear-gradient(90deg, #f60, #ff0, #06c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }這個技巧的底層原理是 background-clip 把背景限制在文字輪廓內(nèi)部然后文字顏色設(shè)為透明露出來的就是背景。注意這類效果沒法用純 color 屬性控制如果后期要改動字體顏色得改背景漸變而不是 color。還有一個小坑text-fill-color 設(shè)為透明后如果 background 沒設(shè)置或者加載失敗文字就看不見了所以生產(chǎn)環(huán)境要處理好降級方案。4.2 hover與transition的那些坑hover 相關(guān)的問題聽起來簡單但一深挖就暴露很多細(xì)節(jié)。常見的基礎(chǔ)題鼠標(biāo)移入元素背景色 0.3s 漸變過渡。大多數(shù)人會寫.btn { background: #06c; transition: background 0.3s ease; } .btn:hover { background: #08c; }這能工作但面試官會追問如果希望鼠標(biāo)移出時背景延遲 0.5s 再變回去怎么寫這就要用到 transition-delay而且你會發(fā)現(xiàn)transition 的所有屬性可以在一個聲明里統(tǒng)一設(shè)置.btn { background: #06c; transition: background 0.3s ease 0.5s; } .btn:hover { background: #08c; transition: background 0.3s ease; }這樣鼠標(biāo)移入時立即過渡移出時延遲 0.5s 再過渡。實(shí)現(xiàn)“延遲關(guān)閉”正是利用了 transition 的延遲屬性。但這里有一個很隱蔽的坑如果元素有多個過渡屬性比如 background 和 transform 都要漸變但延遲時間不同必須分開寫 transition 規(guī)則否則后面的會覆蓋前面的。還有display: none 和 display: block 之間的切換無法觸發(fā)過渡因?yàn)樵刂苯訌匿秩緲淅锵Я藳]有中間狀態(tài)。正確的做法是配合 visibility 和 opacityvisibility 負(fù)責(zé)“可交互性”opacity 負(fù)責(zé)視覺透明度兩者一起過渡才能實(shí)現(xiàn)“淡入淡出且不遮擋點(diǎn)擊”的效果。4.3 動效性能重繪、重排與合成CSS 動效相關(guān)的面試題性能經(jīng)常是最后一問。核心概念是瀏覽器的渲染流程樣式計(jì)算 → 布局 → 繪制 → 合成。其中“布局”階段就是重排Reflow“繪制”階段就是重繪Repaint。重排的成本最高因?yàn)槲恢米兞撕罄m(xù)所有元素都可能要重新算重繪其次只重新繪制視覺效果不改變布局合成最便宜GPU把現(xiàn)成的圖層拼在一起就行。實(shí)現(xiàn)動畫時優(yōu)先使用合成器屬性 transform 和 opacity。比如一個元素從左邊移動到右邊用 left 屬性會產(chǎn)生重排和重繪而用 transform: translateX() 只觸發(fā)合成性能好得多。按鈕漣漪光圈擴(kuò)散效果就是一個典型的 transform opacity 動畫.ripple { position: relative; overflow: hidden; } .ripple::after { content: ; position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 102, 204, 0.3); transform: scale(0); opacity: 0.6; animation: ripple 0.6s ease-out forwards; } keyframes ripple { to { transform: scale(2); opacity: 0; } }這里用到的是 scale 和 opacity瀏覽器可以全程交給合成器幾乎不會卡頓。面試時主動提到“用了合成器屬性”比單純寫實(shí)現(xiàn)代碼更容易獲得認(rèn)可。will-change 也是常見追問點(diǎn)它可以提前告訴瀏覽器某個元素要變化但千萬不要濫用——元素數(shù)量一多反而會占用大量GPU內(nèi)存造成性能下降。4.4 文字排版與特殊效果文字排版相關(guān)的CSS題相對“軟”但面試官偶爾會考一些不那么常見的屬性。比如“文字豎著排列”——通過 writing-mode 控制.vertical { writing-mode: vertical-rl; text-orientation: upright; }這個效果在傳統(tǒng)風(fēng)格網(wǎng)頁、裝飾性標(biāo)題里很常用。另一個常見的是“文本溢出省略號”單行和多行寫法不同.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }面試中還會聊到“gold文字效果”這類花式標(biāo)題核心就是漸變 高光 背景裁剪 動畫組合。先說實(shí)現(xiàn)路徑背景漸變做金屬質(zhì)感background-clip/text 做文字裁剪再疊加一層白色漸變背景做高光掃過動畫。這些題目考察的其實(shí)是“解決問題的能力”——看到“金光閃閃”這種描述能不能拆成CSS可以實(shí)現(xiàn)的原子步驟比直接背一個現(xiàn)成代碼更受面試官看重。5. 工程化視角的CSS面試題5.1 原子性CSS為什么被反復(fù)討論近幾年 Tailwind CSS 這類原子化框架非常火面試題也開始頻繁出現(xiàn)“你怎么看原子性CSS”。原子性CSS的本質(zhì)是把每一條樣式聲明拆成一個獨(dú)立類比如flex、mt-4、text-center然后在HTML里組合這些類來構(gòu)建樣式。面試時會問“原子性CSS有什么優(yōu)勢”標(biāo)準(zhǔn)答案有樣式與組件結(jié)構(gòu)在同一文件里定位問題快不用命名類名減少了命名沖突類名可復(fù)用樣式冗余少JIT模式按需生成體積可控。但面試官更想聽的可能是它的反面——原子化CSS的class爆炸、可讀性差、信息密度低以及在設(shè)計(jì)系統(tǒng)里維護(hù)性的爭議。我個人的觀點(diǎn)是原子性CSS適合組件化開發(fā)里組合語義明確的 UI但別把它當(dāng)成萬能藥。如果項(xiàng)目里有大量復(fù)雜的嵌套偽類、交互狀態(tài)和主題變量傳統(tǒng) BEM 或 CSS Modules 可能仍然更合適。面試時能做到“不吹不黑分場景討論”比單純站隊(duì)客觀得多。5.2 覆蓋組件庫樣式的正確姿勢“如何覆蓋 Bootstrap 樣式”是經(jīng)典老題但現(xiàn)在的場景早就換成了覆蓋 Vue/React 組件庫里的內(nèi)部樣式。這類題的底層邏輯沒有變優(yōu)先級、層疊、作用域隔離。優(yōu)先級的答案很簡單——用更高優(yōu)先級的選擇器覆蓋目標(biāo)樣式。所以最直接的方法是/* 覆蓋默認(rèn)按鈕 */ .btn-custom { background: #f30; }前提是你的類名寫在了目標(biāo)元素上且你的類名優(yōu)先級高于組件庫的類名。但組件庫一般會用!important或者深層級選擇器常規(guī)類名覆蓋不了這時就得想辦法。Bootstrap 5 提供了更優(yōu)雅的方案——CSS 變量覆蓋。在 :root 里重新定義變量值就能全局改變主題色完全不用寫選擇器。Vue 項(xiàng)目里更常見的是 scoped 樣式問題。scoped 會給元素加上>.btn { --ripple-color: rgba(0, 0, 0, 0.3); } .btn::after { background: var(--ripple-color); border-radius: 50%; content: ; } .btn:hover { --ripple-color: rgba(0, 102, 204, 0.6); }這個寫法的精妙之處在于hover 狀態(tài)改變的是變量而非直接覆蓋偽元素樣式。當(dāng)你需要給不同按鈕配置不同的漣漪顏色時只需要在按鈕上覆蓋變量偽元素樣式完全不變。面試官會接著問“CSS 變量和 Sass 變量的區(qū)別”——CSS 變量是運(yùn)行時動態(tài)的媒體查詢、hover 狀態(tài)都能改變它還會繼承Sass 變量是編譯期靜態(tài)的build 之后就固定了。這個區(qū)別能毫不猶豫地說出來說明你踩過 SSR 或主題切換的坑。5.4 預(yù)處理器與構(gòu)建工具預(yù)處理器相關(guān)的題目雖然不如純CSS知識點(diǎn)高頻但面試中偶爾會問“為什么還需要預(yù)處理器”。Sass/LESS 的核心能力是嵌套、變量、mixin 混入、函數(shù)這些讓 CSS 擁有了“編程能力”解決了重復(fù)代碼和不可復(fù)用問題。但現(xiàn)代 CSS 自己也在變強(qiáng)——CSS 變量、:is()、:where()、嵌套規(guī)則草案已經(jīng)支持不少。面試官很可能會問“那還需要預(yù)處理器嗎”。我的回答框架是預(yù)處理器解決的是開發(fā)體驗(yàn)問題寫起來更爽原生 CSS 變量解決的是運(yùn)行時動態(tài)問題跑起來更靈活兩者并不是替代關(guān)系。大型項(xiàng)目通常兩個都用Sass 管代碼組織CSS 變量管主題和動態(tài)樣式。再加上 PostCSS 這類工具做自動前綴、壓縮、兼容性處理才是完整的前端樣式工程鏈路?；卮饡r提到 Autoprefixer、postcss-preset-env 這類具體工具會比泛泛而談“工程化”強(qiáng)很多。6. 高頻CSS題目速查表與避坑實(shí)錄6.1 面試高頻題速查表高頻題一句話答案追問方向標(biāo)準(zhǔn)盒模型和怪異盒模型什么區(qū)別width 是否包含 padding/borderbox-sizing 怎么切換、為什么默認(rèn)是 content-boxflex: 1 是什么意思flex: 1 1 0%等比分配剩余空間flex: auto 有什么區(qū)別水平垂直居中實(shí)現(xiàn)方式flex/grid/絕對定位transform每種方案的適用場景和限制BFC 是什么、怎么觸發(fā)獨(dú)立渲染結(jié)界overflow/flex/position 可觸發(fā)margin 合并、高度塌陷怎么解決優(yōu)先級怎么算ID 類 元素加 !important 最高為什么同量級下后者覆蓋前者偽類和偽元素區(qū)別偽類是狀態(tài)偽元素是虛擬元素::before 和 :hover 能組合使用嗎字體漸變怎么實(shí)現(xiàn)background-clip: text 透明文字色降級方案怎么做transform 和 top 動畫誰快transform 走合成top 觸發(fā)重排will-change 有什么副作用CSS 變量有什么用運(yùn)行時動態(tài)、繼承、主題切換方便和 Sass 變量有什么區(qū)別怎么覆蓋組件庫樣式提高優(yōu)先級 / CSS 變量 / 深度選擇器scoped 為什么會導(dǎo)致覆蓋失敗單行省略號怎么寫white-space/overflow/text-overflow多行省略號怎么實(shí)現(xiàn)原子性CSS怎么看類名組合、按需生成、可讀性有爭議什么時候不建議用 Tailwind這張表適合面試前快速過一遍每個問題都值得展開成一分鐘的完整回答。真正上場時不要急著報答案先重復(fù)一遍題目確認(rèn)自己理解了面試官問的場景再按“概念定義 → 核心原理 → 代碼示例 → 適用場景”的順序組織回答這個框架本身就能讓你顯得更沉穩(wěn)。6.2 我在面試中踩過的坑和復(fù)盤寫這篇文章時我翻了翻自己過去面試的記錄有幾個高頻翻車點(diǎn)特別典型值得單獨(dú)拎出來說。第一個坑是“背答案不看場景”。有個候選人被問到“flex: 1 和 flex: auto 區(qū)別”他背得一字不差但面試官換了個問法“兩個子元素一個按鈕文字很短一個按鈕文字很長想讓它們在容器里等寬顯示怎么寫”他立刻卡殼了。原因在于題干里的“等寬”意味著無論內(nèi)容多少寬度必須一樣這就要用 flex-basis: 0% 而不是 auto。他背了詞條卻沒理解詞條背后的計(jì)算規(guī)則。備考的時候每個概念都要自己推一遍——“如果內(nèi)容變長會怎樣”“如果容器變窄會怎樣”。第二個坑是“忽略兼容性”。有人答“CSS容器查詢”答得非常好但問到“這個特性在生產(chǎn)環(huán)境能用嗎”就沉默了。面試官要的不只是“知道新技術(shù)”還要有“判斷能不能用”的工程意識。解決方案很簡單簡歷里寫的每個 CSS 特性都順手查一下 Can I Use 的兼容性數(shù)據(jù)并想好在不支持的情況下怎么降級。這個習(xí)慣在面試中能直接體現(xiàn)工程經(jīng)驗(yàn)。第三個坑是“不思考性能”。實(shí)現(xiàn)一個漣漪動畫的時候候選人用了動畫 width 和 height 從 0 到 200px能跑但一放到列表頁就明顯卡頓。原因就是動畫屬性觸發(fā)了重排每幀都要重新算布局。正確的做法是用 transform: scale()。這個案例讓我之后養(yǎng)成了習(xí)慣——任何動效寫完先開一下開發(fā)者工具的 Rendering 面板勾選中 Paint flashing如果綠色閃爍的區(qū)域很大就說明動畫在重繪需要考慮換屬性。面試和實(shí)際開發(fā)一樣最怕的不是不會而是“假會”。把每個知識點(diǎn)都落到手寫代碼上真的寫出效果再反問自己一句“換一種情況怎么辦”這份題庫的價值才算真正發(fā)揮出來。我的建議是把上面的表格當(dāng)作索引每個問題都開一個 CodePen 或本地頁面手寫一遍代碼親眼看一下效果再關(guān)掉代碼憑記憶重寫一遍。能完整復(fù)現(xiàn)的才是你的背下來的早晚會忘。CSS 面試問的不是記憶而是你對布局、渲染和樣式系統(tǒng)的真實(shí)理解。這套題庫刷完不管面試結(jié)果如何你手頭的 CSS 代碼質(zhì)量一定會上一個臺階。