1. 面试官考CSS到底在考什么CSS面试题有个特别迷惑人的地方看起来全是问答题背一背就能过实际上挂人的比例相当高。我见过不少人能把盒模型定义背得滚瓜烂熟结果问为什么这个按钮高度和预期不一样就卡住了。原因很简单面试官想考察的从来不是你知道这个名词而是你有没有用CSS解决过真实问题。1.1 大多数人是挂在没听懂题面背后的考点同一个CSS问题在不同级别的面试里考察深度完全不同。拿盒模型举例初级面标准盒模型和怪异盒模型有什么区别中级面box-sizing: border-box在什么场景下必须用不用会出什么问题高级面给定一个父容器和两个子元素要求右侧固定宽度、左侧自适应同时左右间距始终固定要求左侧文字超长时不溢出、不换行错乱请你分析最佳实现方案你会发现越往后题目越接近真实开发场景。面试官不是在考你背定义而是在考你遇到布局问题时脑海中是否有清晰的问题定位流程和方案选型逻辑。所以准备CSS面试题第一件事是调整心态这是一场关于解决真实布局问题能力的考察而不是背诵比赛。这篇文章我会按面试高频方向把原理、代码、踩坑经验拆开讲尽量还原真实面试现场。1.2 一套可复用的答题框架现象-原因-方案-延伸我面试别人和被人面试总结下来最有效的答题节奏是四步现象先复述问题确认自己理解的是对的。比如问为什么z-index不生效你可以先确认你是指给元素设置了蛮大的z-index但依然被其他元素盖住了对吧原因讲清楚底层原理。这一层决定你是真懂还是背答案比如z-index不是随便一个大数字就有效它只在同一个层叠上下文里比较大小而且很多CSS属性会触发新的层叠上下文。方案给出具体的解决方式最好带代码。比如给元素设置position: relative并且确保父级没有创建独立的层叠上下文或者调整DOM层级。延伸主动展开相关场景展示知识面。比如这个问题引申到移动端浮层和弹窗上还要注意transform对fixed定位的影响。这套框架的好处是哪怕某道题你之前没准备过按照现象-原因-方案-延伸也能有条理地讲出七八成内容给面试官的印象分很高。下面每个答案我都会尽量按这个思路来写。2. 高频基础题盒模型、层叠上下文与选择器权重这三类题目几乎是所有前端面试的开场菜逢面必问。但正因为太基础很多人反而准备得不认真结果在追问环节翻车。2.1 盒模型标准盒模型和IE盒模型的区别现象面试官问你标准盒模型和IE盒模型的区别然后让你解释width到底包含什么。原因CSS的盒模型由四个部分组成——content内容、padding内边距、border边框、margin外边距。标准盒模型里width设置的是content的宽度实际占位宽度 width padding borderIE盒模型怪异盒模型里width直接包含了content、padding和border实际占位宽度就是width不会再额外增加。举个数字例子一个div设置width: 200px; padding: 20px; border: 2px solid #000。标准盒模型内容区是200px元素实际总宽 200 202 22 244pxIE盒模型整体总宽就是200px内容区 200 - 202 - 22 156px现代浏览器默认是标准盒模型但很多组件库、重置样式表里会统一设置box-sizing: border-box原因很实际布局的时候你希望设置width就是最终宽度不用心算padding和border会不会把容器撑爆。方案全局设置border-box。*, *::before, *::after { box-sizing: border-box; }我个人的建议是这个全局设置要在项目初始化样式时就定下来越早越好。因为中途改的话所有依赖默认content-box宽度计算的组件都会受影响排查成本极高。延伸面试官如果接着问margin会不会被box-sizing影响答案是不会margin永远独立在外不参与width计算。再延伸一点就是margin合并问题——垂直方向上相邻元素的margin会取较大值而不是相加这在做卡片列表间距时特别容易踩坑。2.2 层叠上下文z-index为什么总是失效现象面试题里很常见的是项目里一个弹层被另一个弹层盖住了我的z-index已经是99999了为什么还是无效。原因z-index比较大小有个前提——必须在同一个层叠上下文里。如果两个元素分属不同的层叠上下文它们之间的层级关系由各自的层叠上下文祖先决定而不是直接比较z-index数值。哪些属性会创建层叠上下文高频的场景有position定位元素relative/absolute/fixed/sticky且z-index不为autotransform值不是noneopacity小于1filter不是nonewill-change指定了transform、opacity等属性flex/grid容器的子元素且z-index不为autoisolation: isolate所以当你说z-index很大但被盖住了先检查自己的元素是否在一个被transform或opacity创建了层叠上下文的父级里。父级整体级别低子级数字再大也出不去。方案先定位创建层叠上下文的祖先。简单做法是给两个弹层的根节点都设置isolation: isolate人为隔离层级让它们可以独立比较z-index或者把弹层从被transform包裹的容器里移出来放到body末尾统一管理。延伸移动端常见的一个坑是弹层父级为了做动画加了transform属性然后发现弹层盖不住任何东西。这不是z-index的锅是transform创建了新的层叠上下文。处理思路要么动画元素和弹层分离要么动画只作用于弹层内部而不是包裹弹层。2.3 选择器优先级计算规则与常见误判现象面试官会给你一段CSS让你判断最终的样式优先级。这是考察基本功最直接的题目。原因CSS选择器优先级的计算其实是一个四位数值的比较不是在比拼谁的最后写而是按权重逐位比较内联样式1000ID选择器100类、属性选择器、伪类10元素选择器、伪元素1举个例子/* 优先级101 */ #nav .item { color: red; } /* 优先级012低于上面 */ ul li .item { color: blue; } /* 优先级相同的情况下后写的生效 */ .nav .item { color: green; }方案遇到复杂选择器别去感觉直接拆开算一遍权重。如果是自己写代码尽量让优先级扁平化不要叠出一长串选择器。一个类名能解决的事用两个类名就是在制造混乱。延伸这里经常连带问!important。!important的优先级高于内联样式但有例外——内联样式加!important仍是最高。还有一个细节动画中的样式不受!important影响这一点很多人不知道。其实面试官愿意延伸到这里是想看你是否区分得了样式来源用户代理、用户、作者、动画、过渡等对优先级的影响。3. 布局题是重头戏flex、grid与经典布局实战布局题是CSS面试中占比最大的部分几乎每一轮都有。因为布局是前端最日常的工作也是最能体现工程思维的地方。3.1 水平垂直居中的四种方案与取舍现象请把一个元素在父容器里水平垂直居中是面试出现频率最高的一题。你以为考的是会一种方法实际是考你能不能根据场景选出最合适的一种。方案一flex布局.parent { display: flex; align-items: center; justify-content: center; }优点是代码最短、语意清晰子元素数量不限多个子元素也能一起居中。缺点是兼容性在非常老的项目里要踩IE10的坑不过现在基本不用考虑这点。方案二grid布局.parent { display: grid; place-items: center; }一句话搞定比flex还简洁适合整个容器内所有元素都居中。如果只是部分元素居中flex更灵活一些。方案三绝对定位 transform.child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }这个方案的适用场景是子元素尺寸未知、父级也不是标准文档流内布局时使用。但要注意transform的百分比是相对元素自身宽高不是父容器。另外定位脱离了普通流会影响周围元素排序不宜滥用。方案四table-cell.parent { display: table-cell; text-align: center; vertical-align: middle; }这个偏老派现在的项目很少用但它有一个特性值得记住不需要子元素尺寸天然支持多行文本垂直居中。如果你在维护老项目时遇到别慌原理还是居中对齐那一套。延伸面试官大概率会追问元素尺寸不固定时哪种方案不受影响。flex、grid、absolutetransform都不要求子元素有固定尺寸table-cell方案在多行文本时反而表现最好。我建议你准备答案时每种方案都配一个适用场景说明而不是只背代码。3.2 flex布局flex: 1到底是什么意思现象项目里大量使用flex布局面试官常问flex: 1等价于什么或者flex: 1和flex: auto有什么区别。原因flex是三个属性的简写——flex-grow、flex-shrink、flex-basis。flex-grow空间有剩余时如何分配剩余空间flex-shrink空间不足时如何收缩flex-basis项目在主轴上的基础尺寸flex: 1的等价写法是flex: 1 1 0%含义是grow为1shrink为1basis为0%。意思是基础尺寸为0剩余空间全部等分分配。这就是经典的等分宽度效果。flex: auto等价于flex: 1 1 auto含义是基础尺寸由内容决定再参与剩余空间分配。所以flex: auto的容器不会等分宽度哪个内容长哪个就宽。flex: none等价于flex: 0 0 auto意思是完全不伸缩。方案写栅格布局时如果希望每列等宽用flex: 1如果希望按内容宽度自适应用flex: auto。我见过很多同学在列表项里用flex: 1结果内容较长时文字被压缩到换行就是因为基础尺寸为0导致比重全部交给了剩余空间。延伸还有一个高频追问align-items和align-content的差别。align-items适用于单轴线布局控制每根轴线内部的项目对齐align-content只作用于多轴线容器控制整根轴线在交叉轴上的分布。简单记有两个以上轴线时align-content才生效单轴线时它没任何作用。3.3 grid布局与经典两栏/三栏布局现象网格布局题这几年越来越多尤其碰到实现一个左侧固定右侧自适应的两栏布局再聊聊flex和grid两种方式的区别。先写grid版本的两栏布局.container { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }左侧固定220px右侧占剩余全部空间gap: 16px负责间距干净利落。如果是三栏中间自适应.container { display: grid; grid-template-columns: 200px 1fr 200px; }flex版的两栏.container { display: flex; } .left { flex: 0 0 220px; } .right { flex: 1 1 auto; min-width: 0; }注意我给右侧加了min-width: 0。这是flex布局里一个非常关键的细节flex子项的默认min-width: auto意味着它不能小于内容宽度当内容里有长单词或长URL时右侧会把容器撑破。加上min-width: 0允许子项收缩到小于内容宽度才能正常换行。延伸如果你是面试官视角这里最想听的是你能否说明白fr单位和flex: 1的区别。fr是grid的弹性长度单位1fr表示剩余空间的一份而flex中flex: 1是grow/shrink/basis三者的组合语义更丰富。还有repeat(auto-fill, minmax(250px, 1fr))这种自动填充的写法做响应式卡片墙特别好用.card-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }效果是每张卡片最小250px空间允许就多放一列自动适应屏幕宽度不需要写任何媒体查询。能主动说出这个用法面试官基本会认定你是真的用grid做过项目。4. 新特性考点CSS变量、容器查询与:has()近年CSS新特性进面试题的频率越来越高尤其是CSS变量、容器查询、现代伪类。这类题考的是你的学习能力和技术敏感度。4.1 CSS变量从用起来到理解继承与作用域现象面试题经常是CSS变量和预处理器变量有什么区别或者让一个主题色在某区域全局生效怎么实现。原因CSS自定义属性CSS变量用--开头声明配合var()函数使用。最重要的是两点继承性与作用域。继承性举例:root { --primary-color: #1677ff; } .btn { background: var(--primary-color); }--primary-color定义在:root上所有元素都能继承到。如果你在某个局部容器重新定义同名变量容器内所有使用var(--primary-color)的元素都会跟着变色外部不受影响。这就是作用域和JS的变量作用域逻辑很像.card { --primary-color: #ff6600; background: var(--primary-color); /* 这里 #ff6600 生效 */ } .card .btn { background: var(--primary-color); /* 继承自 .card也是 #ff6600 */ }和预处理器变量如SCSS的$primary-color最大的区别是预处理器变量编译时静态替换没法运行时动态变化CSS变量是运行时的真实变量可以在浏览器环境里直接改也能和JS交互。典型场景就是主题切换在:root上切换>:root[data-themedark] { --bg-color: #1f1f1f; --text-color: #e5e5e5; } :root[data-themelight] { --bg-color: #ffffff; --text-color: #333333; } body { background: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; }JS端切换时改document.documentElement.dataset.theme即可。面试官追问为什么加了transition后主题切换有渐变效果你还可以展开说transition不影响background的背景图部分但background-color的过渡是逐帧插值的这就是渐变感的来源。4.2 现代伪类与容器查询必答的新考点现象面试问:is() 和 :where() 的区别或者容器查询和媒体查询有什么区别容器查询解决什么问题。:is与:where。:is()和:where()都接收一组选择器匹配其中任意一个。区别在于优先级:is()会取参数里优先级最高的选择器作为整体优先级:where()的优先级恒为0举例/* * header、main、footer 内部的 .link 文字变红 * 优先级 :is() 参数里最高那个如果 header 是 element selector整体优先级受 main 等影响 */ :is(header, main, footer) .link { color: red; } /* 优先级 0 10.link 的类优先级 */ :where(header, main, footer) .link { color: red; }看起来差别不大但实际场景里:where()用于你想要一个低优先级的兜底样式同时允许外部样式轻松覆盖的场景特别适合组件库底层样式的编写避免内置样式抢过开发者的覆盖样式。容器查询。这题是近年的大热点。传统媒体查询看的是视口宽度容器查询看的是容器宽度组件放在窄容器里就显示窄布局放在宽容器里就显示宽布局与视口无关。.card { container-type: inline-size; } container (min-width: 400px) { .card { display: flex; } }含义是当.card容器宽度达到400px以上时内部布局切换为flex排布。做组件库时非常好用一个组件在侧边栏和主内容区可以自动适配不用依赖父级页面写媒体查询。延伸面试官可能问浏览器兼容性。容器查询在现代浏览器中已经得到很好的支持但在老旧移动端环境要谨慎。答这类题时建议主动提一句使用前会查一下实际项目目标浏览器的支持情况显得有工程判断力。5. 性能优化题回流、重绘与合成器CSS面试不可能绕开性能优化。面试官不会只问回流重绘是什么更常问的是你有哪些减少回流的经验动画用transform还是top性能更好为什么。5.1 回流重绘的底层逻辑现象题目可能是说说回流和重绘的区别以及如何减少回流。原因浏览器渲染页面的过程大致是构建DOM树 → 构建CSSOM树 → 合并成渲染树 → 布局layout→ 绘制paint→ 合成composite。回流reflow页面布局发生变化需要重新计算元素位置和几何尺寸波及范围大性能开销高。重绘repaint元素外观变化颜色、背景等但几何尺寸和位置没变不需要重新layout性能开销较小。合成composite某些属性的变化甚至不需要重绘直接进入合成阶段由GPU处理性能最好。触发回流的操作改变宽度高度、修改top/left、删除或增加可见DOM、浏览器窗口resize、读取某些布局属性如offsetHeight、getBoundingClientRect时强制同步布局。触发重绘但不触回流改color、background-color、visibility、box-shadow等。触发合成不触发重绘回流transform、opacity的变化。方案减少回流的核心思路是把多次样式修改合并为一次、把动画从文档流中抽离。比如// 不好的写法每次改一个属性都触发一次回流浏览器要反复计算布局 el.style.width 100px el.style.height 100px el.style.margin 10px // 更好的写法合并操作浏览器按一次批量处理 el.style.cssText width:100px;height:100px;margin:10px延伸给你一个经常考的场景——大量列表渲染时的性能卡顿。除了合并样式还可以用content-visibility: auto跳过屏幕外内容的渲染这是一个非常有性价比的优化属性但很多人不知道.list-item { content-visibility: auto; contain-intrinsic-size: 200px; }content-visibility: auto让浏览器跳过视口外元素的渲染滚动到可视区域时才渲染contain-intrinsic-size用来占位防止滚动条跳动。首次渲染开销大的长列表可以明显提速。我实测过一个5000行的列表开启后初始渲染时间减少一半以上。5.2 实战中的性能优化策略现象为什么用transform做动画性能比top好是必问题。原因transform变化不触发布局和绘制直接进入合成阶段GPU参与部分工作所以动画流畅。而top变化导致元素位置改变浏览器要重新布局、重绘性能开销大。所以CSS动画里推荐用transform代替top/left移动元素。方案一个常见的优化是开启GPU加速.card { transform: translateZ(0); /* 或者 */ will-change: transform; }我在面试时如果遇到候选人主动说will-change不能滥用它会占用额外内存会加分。因为很多人只会背will-change可以加速动画不知道它的问题。will-change让浏览器提前优化该属性但会占用更多内存适合频繁变化的元素不适合大量无关元素。延伸实际项目里动画结束后移除will-change处理起来麻烦所以我更多用transform: translateZ(0)做被动加速。不过它也要小心大量使用会把内存吃上去。另外动画不要让整个页面大范围变化比如弹层的淡入淡出用opacity配合pointer-events: none就足够了。6. 移动端适配与常见问题排查实录移动端适配和各类坑题属于实战性极强的考点面试官出的题往往来自他真实踩过的坑。这一节我把高频的几类问题整理成速查表希望能帮你在面试现场少踩雷。6.1 1px问题与safe-area适配现象高频题移动端1px边框如何实现。原因高清屏下1px CSS像素对应 2 或 3 个物理像素直接写border: 1px solid #ccc在部分设备上看起来偏粗。解决方案多种最常用的是配合transform: scale(0.5)在纵向缩放一半。方案用一个伪元素实现细边框。.hairline { position: relative; } .hairline::after { content: ; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #ccc; transform: scaleY(0.5); transform-origin: left bottom; }这是一个稳妥方案但要注意::after的定位是相对.hairline所以父级必须是position: relative。而且如果父级有overflow: hidden可能把伪元素裁掉。延伸面试里常连着问刘海屏和底部安全区适配。用env()处理body { padding-bottom: env(safe-area-inset-bottom, 24px); }底部按钮栏的适配之前别写死高度最好配合安全区变量动态补偿。我在实际项目里踩过坑iPhone底部小黑条区域把按钮挡住了后来在按钮容器上加了.safe-bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }多写一行constant是为了兼容 iOS 11 的旧写法。如果你能主动说出这个兼容细节面试印象会很好。6.2 面试中的高频坑题排雷以下是我总结的面试中高频出现的CSS坑题每一条都是真实开发场景的浓缩。第一个坑transform影响fixed定位。当一个元素设置了transform它会成为其后代position: fixed元素的包含块。也就是说一个position: fixed的子元素如果父级有transform它就不再相对视口定位而是相对这个父级定位。很多人做弹窗时遇到弹窗位置错乱排查半天发现是某个父级加了transform: translateY(0)。为什么会这样因为transform创建了新的包含块和层叠上下文。解决方案不要把transform加在弹层的祖先元素上或者弹层放到body末尾用teleport指框架层面的做法再挂载。第二个坑BFC能解决哪些布局问题。面试官会问BFC是什么如何触发解决什么问题。BFC全称是块级格式化上下文可以理解为一个独立的布局区域内部元素布局不对外部产生影响。触发方式常见的有根元素float不是noneposition是absolute或fixeddisplay是inline-block、flex、grid、table-cell等overflow不是visible容器query等新特性也会触发BFC能解决的高频场景清除浮动、防止margin合并、防止元素被浮动元素覆盖。比如给容器加overflow: hidden就触发了BFC容器内浮动元素不会溢出到容器外面。第三个坑表格布局和浮动布局的遗留问题。面试可能会问表格布局和浮动布局为什么被flex淘汰。表格布局的主要问题是不灵活列宽分布由内容和table布局算法决定很难精确控制浮动布局的问题在于需要手动清浮动并且垂直居中非常难做。flex和grid的出现就是为了解决这些约束——可以在主轴和交叉轴上精确控制尺寸和对齐方式。第四个坑overflow: hidden 并不总是能解决溢出。很多人遇到文字溢出就加overflow: hidden但如果容器没有明确的高度约束或display: block等基本属性可能根本无效。处理文字溢出需要使用完整组合技.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }多行省略则用-webkit-line-clamp.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }第五个坑一个元素能否同时存在两个伪类条件。这个属于概念辨析题。比如如何选中既没有被禁用、又是最后一个子元素的按钮。可以这样答button:not(:disabled):last-child { color: red; }:disabled是伪类:last-child也是伪类它们可以组合、可以嵌套。面试官有时候就是考你用法是否熟练。以上这些坑题我建议整理成自己的速查表面试前过一遍。真遇到的时候能反应过来这是z-index相关还是这是BFC相关就已经赢了一半。我个人的经验是CSS面试题复习的重点不在刷多少道题而是建立一个现象到原理的映射关系。遇到布局不对先判断是尺寸问题、定位问题还是层叠问题再去想对应的CSS机制。这样哪怕你记不全代码也能按逻辑推出答案。最后再分享一个我一直在用的小技巧面试前把项目中真正踩过的CSS bug整理出来用现象-原因-方案的方式复述一遍——面试官最想听的其实是你真实解决问题的过程而不是标准答案。