CSS面试题深度解析：从盒模型到现代布局的必备指南

1. 高频 CSS 面试题的真实考法：先读懂考官手里的评分卡

我们总是把 CSS 面试题叫做“八股文”，但它和真正有死记硬背意义的八股文有本质区别。面试官并不会因为你能默写出 box-shadow 的五个参数就给你通过，真正决定你面试结果的，是你面对一个看似普通的问题时，能不能顺着问题往下走三层。这个现象我在过去几年参与过的上百场前端岗位面试里反复看到：一多半候选人在“什么是盒模型”这种开胃题上能对答如流，但只要追问到“margin 折叠的发生条件到底是什么，应该怎么解决”，很多人就开始卡壳。

先说一个让人比较意外的观察：CSS 面试题是所有前端面试环节里幸存者偏差最小的一块。为什么这么说？因为 JS 算法题可以背题，可以把 LeetCode 上的解法复述得一字不差，但 CSS 很难靠短期记忆糊弄过去。你可以在两天内背下来 flex 的十个属性含义，但是不可能在两天内建立起对“当容器宽度发生变化时，flex: 1 和 flex: 1 1 auto 到底各自表现成什么样”的直觉。这种直觉需要真实的项目经验来喂养。面试官出 CSS 题目，表面考的是记忆，实际考的是你有没有做过、有没有踩过坑、有没有总结。

今年有一个新趋势特别明显：Modern CSS 开始大幅挤占传统考点。过去大家习惯把 float 清浮动、position 定位那套旧题备考得滚瓜烂熟，现在打开一套 2026 年的前端面试题你会发现，:has()、容器查询、subgrid、CSS 嵌套、@property 都会出现。这说明岗位要求里不再满足于“能写页面”，而是要求候选人理解 CSS 正在从一个描述性语言向具备编程逻辑的样式系统演进。

所以在展开这份核心题库之前，我们需要先确认三个很基础但容易被忽略的备考原则：

• 原理大于结论。不要只记“flex 容器默认 flex-direction: row”，要能解释为什么弹性布局在主轴上不自适应、在交叉轴上不挤压时项目会有什么表现，因为绝大部分 bug 都出在这类默认行为上。
• 能上代码就上代码。面试时说概念说得再溜，不如把嘴闭上、把手放到编辑器上写一个能跑的效果。所以这套题库里我会在概念辨析之后直接给出一段可以立刻复现的代码。
• 答案要紧贴业务。纯背文档的答案区分不出工作三五年的人的深浅，你需要在回答里自然地带出“我在真实场景里遇到过”的经验，这比任何漂亮的措辞都加分。

这套东西既是题库，也是从真实面试记录里筛出来的高频集锦。我按考频和翻车率两个维度做了排序，下面拆开讲。

2. 布局类题目拿高分的关键：盒模型、BFC、flex 与 grid 的分工

2.1 盒模型：别只想 border-box，边距合并才是埋得最深的坑

如果面试官让候选人“说说 CSS 盒模型”，那这道题通常只值五秒钟。八股答案谁都会背：content-box 是默认值，width 只包含内容；border-box 是 width 包含 content、padding、border，但不包含 margin；box-sizing 可以全局设置。到这里为止，只能证明候选人背过文档，不能证明他做过页面。

真正的分水岭在第二问：“margin 折叠听过吗？什么条件下会发生？打破它的手段都有哪些？”

听我一句劝，大多数候选人挂就挂在试图把 margin 折叠和负 margin、父子折叠混在一起讲，讲到最后自己都绕不回去。

我还记得一次模拟面试中，一个有两年工作经验的前端候选人很自信地回答：“垂直相邻的两个元素会发生 margin 合并。”我说你加一个 overflow: hidden 在父容器上面看看呢？他愣住了。其实父级和子级之间也能产生 margin 折叠，这是很多人实务中遇到“子元素 margin-top 把父元素顶下来了”的第一反应是加 padding-top 的原因，因为那是经验主义给出的解决方案，不是理解。

我把 margin 折叠的关键触发条件整理成一张可直接记忆的表，拿去应付面试够用：

面试中需要说出来的是：折叠发生在垂直方向，水平方向不折叠；发生折叠的根本原因是“两个 margin 之间没有阻挡物”，比如 border、padding、inline 内容、BFC 隔离，这些“阻挡物”把本来要合并的边距隔开了。

破除折叠的做法，实操里最常用的三件套是：父容器设 overflow: hidden、父容器加 padding 或 border、或者干脆改用 display: flex/grid。为什么用 flex？因为弹性布局的上下文里子项的 margin 不再触发传统意义上的折叠，这也成了现在项目里把间距问题“用 flex 一劳永逸”的底层原因。面试答题的时候如果能主动补一句“所以现在很多组件库都在父级上设置 display: flex，不只是为了布局，也顺手规避了 margin 塌陷”，会显得你的知识是贯通项目经验的，而不是背来的。

2.2 BFC：从“能干什么”到“怎么触发”，一条线讲透

BFC（Block Formatting Context，块级格式化上下文）是面试题库里的常青树，几乎每次招聘都会遇到。但大家答起来普遍很僵硬，就是背触发条件的那几个值：overflow 不为 visible、display: inline-block、display: flex、position: absolute/fixed、float 不为 none 等。面试官再追问一句“BFC 可以用来解决什么”，有些人只能答出来“清除浮动”。

其实 BFC 的理解方式可以更本质一些：BFC 是一块独立的渲染区域，区域内部的布局不会对外部产生影响，外部的东西也不会渗透进来。这个隔离性带来三大应用价值，你需要像条件反射一样脱口而出：

1. 清除浮动带来的父容器高度塌陷。当子元素全部 float 后，父元素无法感知子元素的高度。让父元素生成 BFC，它内部的浮动就会参与高度计算。代码上的立即应用就是给父级加 overflow: hidden，这也就是老项目中“万能清浮动大法”的原理解释。
2. 阻止 margin 折叠。父子级之间的边距穿透，本质是它们处于同一个 BFC 内，如果父容器形成独立的 BFC，子元素和外部的 margin 就不会合并。
3. 阻止元素被浮动元素覆盖。下面这个场景值得记忆：左侧固定宽度，右侧自适应，以前没有 flex 的时代会采用右侧加 BFC 的方法来避开左侧浮动带来的覆盖问题，这其实是比 margin-left 更优雅的方案，因为 margin 值需要手动算宽度，而 BFC 让右侧独立成块、自动排斥浮动。

在笔试或当场编码时，涉及 BFC 的最小演示代码可以这样：

html复制<div class="wrap">
  <div class="left">浮动元素</div>
  <div class="content">普通元素</div>
</div>

css复制.wrap {
  width: 400px;
}
.left {
  float: left;
  width: 120px;
  height: 80px;
  background: #e0f2fe;
}
.content {
  overflow: hidden; /* 触发 BFC，避免被 float 覆盖 */
  height: 120px;
  background: #fef08a;
}

试验一下，去掉 overflow: hidden 时，黄色块会向左偏移到蓝色块底下；加上之后，黄色块会自动避开浮动元素区域，占满剩余的 280px。这个例子解释了为什么面试官爱问 BFC ——它一套概念带出了浮动、边距、布局三个重灾区。

2.3 flex 布局：子元素宽度自适应，几乎每场必考

来看热搜词里那条非常具体的：css flex布局子元素宽度自适应。这个搜索频率高得合理，因为所有做后台系统的人都被 flex 子项宽度折磨过。面试时最典型的场景题是这样：

“有一个横向的 flex 容器，里面有 a、b、c 三个子项，现在希望 a、c 宽度不变，b 自动占满剩余空间，你会怎么写？”

这个问题如果想要答出区分度，不能只给出一个 flex: 1。一个成熟的候选人应该从三个属性分别展开，因为 flex 是 flex-grow、flex-shrink、flex-basis 的简写，每一个都有独立语义。

• flex-grow：剩余空间的分配比例，容器有富余空间时才会生效。
• flex-shrink：空间不足时的收缩比例，容器放不下子项时才会触发。
• flex-basis：项目在主轴上的初始大小，优先级高于 width，但如果设了 flex-basis: auto，则会回退用 width 作为基准。

对于“b 自适应”的那个问题，正确写法通常是让 b 设置 flex: 1 1 auto 或 flex: 1 1 0，需要解释清楚这两种写法的差别：

css复制.item-b {
  flex: 1 1 0;   /* 不拿内容宽度当基数，从 0 开始分配剩余空间 */
}
.item-b2 {
  flex: 1 1 auto; /* 先按内容宽度占位，再参与剩余空间分配 */
}

很多人不知道 flex: 1 这个最常用的快捷写法展开后是 flex: 1 1 0%，而不是很多人下意识以为的 1 1 auto。这里的区别会导致不同的“最小宽度”行为：flex: 1 1 0% 会让所有项从零起点平均分得空间，而 flex: 1 1 auto 则让内容多的项在起跑线上就领先。面试官把这个问题往下挖时，真正要听的就是这一段。

还有一个和 flex 子项宽度息息相关的高频 bug：子项里的内容太长溢出容器，或者把 flex 布局挤爆。它的解法是给子项加 min-width: 0。原理是：flex 子项默认的 min-width: auto 意味着它不会小于内容的固有最小宽度，所以当内容是一串连续英文或者长网址时，子项会有自己的“地板价”，导致容器放不下。给子项设 min-width: 0 就解除了这个约束，让子项可以自由收缩。

真题可以这样出：

html复制<div class="container">
  <div class="avatar">头像固定 80px</div>
  <div class="info">
    这是一段很长的用户内容，可能包含很长的一串网址 https://example.com/very-long-url/xxxxxxxxxxxx
  </div>
</div>

css复制.container {
  display: flex;
  width: 320px;
  border: 1px solid #ccc;
}
.avatar {
  flex: 0 0 80px;
}
.info {
  flex: 1 1 auto;
  min-width: 0; /* 不加这句话，长英文会把 .avatar 挤没 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

没有 min-width: 0 时，.info 内部的长内容宁可溢出也会撑住自己的宽度，逼迫头像缩小。加上之后就正常了。这套“项目里真实发生过、不调试看不出原因”的经验，比光记 flex 属性列表有用得多。

2.4 grid 布局：答完与 flex 的分工就能领先八成候选人

CSS Grid 也是热搜常客，面试中直接让你默写 grid-template-columns 属性的不多，更多是概念问法：

“Grid 和 flex 的区别是什么？什么样的场景下你会首选 grid？”

这个问题的正解不在于字典式的定义，而在于你能否说清楚“一维布局”和“二维布局”在实际视觉中的差异。Flexbox 的核心是在一根轴上排布项目，即使你给容器设了 flex-wrap: wrap，它的换行行为也只是一根轴不够用了才去换，新的行不会与上一行“对齐”。Grid 则是明确的“行 + 列”二维网格体系，你在定义列的同时也能定义行，子项放进网格单元里。

在实际业务中去选的时候，决策逻辑可以按“界面形态”判断：

• 导航栏里水平放几个菜单项 → 用 flex，因为只关心水平方向的排布和间距。
• 一列图标带文字的左菜单 → 用 flex + flex-direction: column，重点是垂直排布。
• 卡片列表要分三列，且每行高度要一致 → 用 grid 更好，因为你需要的是“行和列同时被控制”。

Grid 还有两个高频考点值得展开。

第一个是 fr 单位与 %/auto 的差异。1fr 是剩余空间分配单位，类似 flex 中的 flex-grow；如果写 grid-template-columns: 200px 1fr 1fr，含义是左边 200px 固定，剩余空间被两等分。这个用百分比有时做不到同样的效果，因为百分比依赖容器宽度，还要考虑间距，而 fr 天然扣掉了 gap。面试时主动提及“fr 受 gap 影响，而 % 容易加出超宽”，是一个加分的细节。

第二个是在 Grid 里做圣杯布局的经典题。三行三列，头部占满、尾部占满、中间左侧菜单和右侧内容自适应：

css复制.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

css复制.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

这段代码你一边敲一边说出了 grid-template-areas 的可读性优势，就已经把“代码题”盘活了。面试官一般不会要求在一分钟内敲完整个圣杯布局，但如果你能在谈布局分工的时候展示出这样一段干净代码，他就知道你平时是真的在用 grid 而不是只是看了文档。

3. 选择器、优先级与层叠上下文：看似基础实则最容易翻车的三类题

3.1 优先级计算：权重相加只是表面功夫，继承和级联才是命门

优先级题属于“背了不一定对，不背一定错”的类型。最基本的计算方法我相信读者都见过：id 选择器计 1-0-0 的高位，类、属性、伪类选择器计 0-1-0，元素和伪元素计 0-0-1；style 内联样式再压一级；!important 是最终王牌。真要考这个，一两道题就能搞定，比如判断两个选择器的优先级排序：

css复制/* 哪个生效？ */
#app .content .card .title {
  color: red;
}
.app .content .card .title .highlight {
  color: blue;
}

答案是红色生效，因为一个 id 的权重（1-0-0）大于再多的类（0-4-0）加起来。这种题没什么悬念。

但我想提示一个大家在做笔试选择题时容易漏掉的坑：!important 在比较优先级时要单独看，而且它不能用来覆盖内联样式里的 !important。另外，style 属性里的 !important 优先级又比外部样式表的 !important 高。这个链条面试官非常爱在最后追加一句“那如果两边都写了 !important 呢”来问。

比优先级更要命的是很多开发者在项目里养成的习惯：遇到样式不生效就往上加 !important。如果你在面试里也流露出这种思维，面试官会默默给你扣分。更好的答案是把话题往级联层（@layer）上引：

css复制@layer reset, base, components, utilities;
@layer components {
  .btn {
    background: blue;
  }
}
@layer utilities {
  .bg-red {
    background: red;
  }
}

级联层可以控制同名选择器之间的顺序关系，这比拿 !important 硬怼要现代化也科学得多。2026 年的 CSS 面试里，几个主流浏览器对 @layer 的支持已经非常完备，这个知识点值得你主动拿出来秀。

3.2 nth-child 系列：五个看起来一样的选择器，结果天差地别

:nth-child 相关题目在面试里出现频率高得惊人，尤其是笔试和“这段代码最终什么颜色”的选择题。核心区分点是第六个元素和类型过滤：

html复制<ul>
  <li>1</li>
  <li>2</li>
  <span>不是 li</span>
  <li>3</li>
  <li>4</li>
</ul>

如果写 li:nth-child(2)，它会匹配第二个 li，但同时它必须是父元素的第二个子元素。上面的 HTML 中第二个 li（文本 2）满足条件，所以被命中。

如果写 li:nth-of-type(2)，它匹配的是“li 元素类型中的第二个”，HTML 中的文本 3 对应的 li 是 li 类型中的第三个，所以 li:nth-of-type(2) 命中的是“文本 2”的那个 li。当父元素里插入了一个 span，nth-of-type 不听 span 的指令，计算的是 li 自己类型的序号。

下面这张表建议你抄进笔记里，面试前看一遍：

笔试最常见的变形是 p:nth-child(2) 与 .item:nth-child(2) 的区别。前者要求这个元素既是第二个子元素又必须是 p，后者要求既是第二个子元素又得有 class="item"。如果父元素的第二个孩子是 span，这两个选择器都不会命中任何元素。需要记住一个反直觉结论：nth-child 的计数不是从“你要选的那类元素”里数的，而是从父元素所有子元素里数的。这是 CSS 面试里出错率最高的单选题之一。

3.3 层叠上下文与 z-index：谁压住谁，不是看 z-index 数字谁大

很多候选人写弹窗、写下拉浮层时遇到过这种问题：“明明我给元素加了 z-index: 99999，为何还是被一个 z-index: 100 的元素压住了？”这个问题背后是层叠上下文和嵌套上下文的作用规则。

要区分两个概念：一个元素能否参与层叠比较，以及它在本地层叠上下文内的层叠顺序。z-index 不是全局的楼层号，它只在同一个层叠上下文内部互相比较。如果两个元素分属不同的层叠上下文，那它们的 z-index 高低是“按各自的祖先层叠上下文”对祖先整体进行比较的，哪怕一个子元素的 z-index 是 999999，只要它父级（祖先）的层叠上下文比另一个上下文低，它也会整体被压住。

触发生成层叠上下文的属性不少，最常见的有：

• position 值为 relative、absolute、fixed、sticky 且 z-index 值不是 auto。
• flex、grid 子项且 z-index 值不是 auto。
• opacity 小于 1。
• transform、filter、perspective、clip-path、mask 等非 none 的值。
• will-change 指定了能生成层叠上下文的属性。
• isolation: isolate。

实战场景我们见到过：一个父容器设置了 transform: translateZ(0) 来开启 GPU 加速，结果里头的弹窗无论 z-index 调多大都出不了父级，因为父级本身成了一座“围城”。解法通常是给弹窗的父级改成 position: static 并且不设 z-index，或者把弹窗挂到 body 下用 createPortal 方式渲染。

面试官问到这道题时，可以顺带把设置 isolation: isolate 来主动构建层叠上下文的方法也讲出来。这一个开发中常用的隔离技巧很多候选人不知道，但是它能帮你把一个局部区域整体提升，让区域内部的 z-index 不影响外部。有经验的人会说：“我经常在图标按钮组或需要局部浮层的地方用 isolation: isolate 来防止 z-index 大混战。”这句话的价值远超你背会了十个触发条件。

4. 2026 年的 CSS 面试新题位：现代特性、原子化与性能，躲不掉

4.1 :has()、容器查询与 CSS 嵌套，正在进入必考清单

2026 年的前端面试题里，新特性的问题占比明显攀升。头一个值得你精心准备的就是**:has() 选择器**，网络上给它起了个外号叫“父级选择器”，因为它的实际作用允许你根据后代的特征选择祖先元素。举一个最有代表性的面试场景：一张卡片里，只有当它包含图片时，才需要给卡片头部加额外内边距，传统方案是后端加一个 class 或 JS 去检查，而用 :has() 可以一条样式搞定：

css复制.card:has(.cover-image) {
  padding: 0;
}
.form-group:has(input:required)::before {
  content: "必填";
  color: red;
}

这个能力之所以在面试里高频出现，不是因为它花哨，而是它正面挑战了开发者对“CSS 只能由父到子”的固有认知。答题时最好能提到它方便了业务层“少写 JS”，正是前端工程里大家最关心的事。

容器查询是第二个值得展开的现代考点。过去我们经常用媒体查询来做响应式：视口小于 768px 才换布局。但组件化开发中，更常见的问题是“卡片被放进一个 400px 的侧栏里，它和放在 900px 内容区时该如何表现”？媒体查询看不到组件所在容器的宽度，容器查询解决的就是这个问题。

代码示范如下：

css复制.card-container {
  container-type: inline-size;
  container-name: card;
}
@container card (max-width: 400px) {
  .card__inner {
    flex-direction: column;
  }
}

这个特性一出现，我们就不需要再为一个“既可横排也可竖排”的组件准备两套互相覆盖的样式类了。面试官在这里会考察你是否有“为组件服务”的思维。你可以结合一个常见的电商卡片项目来说：同一个商品卡片，放在首页大轮播里是横排图左字右，放进猜你喜欢的小网格里是竖排图上图下，以前得用 JS 算宽度或做两套组件，容器查询直接根据卡片所在容器宽度来决定内部布局。

CSS 嵌套也是近期面试中的生面孔。原生 CSS 支持了类似 Sass 的嵌套写法：

css复制.nav {
  .item {
    color: black;
    &:hover { color: blue; }
    .icon { margin-right: 4px; }
  }
}

技术上不复杂，但面试的价值在于考察候选人有没有分清“原生嵌套”与“预处理器嵌套”的适用差异。比如原生嵌套解析是从右往左逐层展开的，嵌套层级过深会导致选择器非常长、性能变差，所以实际项目中并不建议把嵌套写成五六层以上。你能在现场答出这一层，面试官会认为你不仅知道新语法，也考虑过工程约束。

4.2 原子化 CSS 进场：为什么面试官开始问 Tailwind、Unocss

看着热搜词里的原子性css，我几乎能确定这是面试圈一个新热点。过去几年 Tailwind 横扫了后台和中后台项目，2025 年之后 Unocss、Windicss 等方案也相继进入工程化选型视野。面试官在简历上看到候选人写了 Tailwind，大概率会深问一句：你怎么理解原子化 CSS？它和传统语义化 CSS 的边界在哪里？

面试中一个稳妥的切入角度是承认它有收益也有代价。收益非常直接：约束样式滥用，让设计走统一 token；团队协作时不需要再为 class 命名冥思苦想；通过按需扫描把未使用的样式直接裁剪掉，产物体积显著变小。代价则是 HTML 模板会变得很长，阅读时满目都是类名，而且类名即样式，无法很好地表达“这个元素在组件里是什么角色”。还有一点，组件的可复用性其实降低了，因为很多原子类绑死了视觉。

如果要在核心题库里给这个问题排难度，它的难点不在于对 Tailwind 优缺点的列举，而在于候选人是否知道原子化 CSS 背后的设计原理。例如 hover:bg-blue-500 这类变体是怎么工作的？它本质上编译出来的不是一行具体 CSS，而是利用 CSS 的原生能力去生成带伪类的工具类。比如：

css复制.hover\:bg-blue-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

这里还顺带用了 CSS 变量来存储透明度，体现了原子类工具类对现代特性的使用方式。能够讲到这里，面试官基本就能把你归入“懂原理”而不是“会用框架”的一档。

4.3 字体、动效与性能：Remote Font、@font-face、CSS 渲染链路

热搜词里还有几个小却狠的点：css字体，css 引入远程字体文件，css 旋转代码，css 涟漪光圈扩散，css动效样式库。它们凑在一起，正好构成了面试里“CSS 性能与体验优化”的切片。

先说字体渲染题。面试官最常问的一句话就是“网页中如果要引入远程字体，你会怎么处理？”。这里要答的内容不止是 @font-face 的语法，更包含加载性能策略。一个成熟的回答应该包含：

1. 用 @font-face 声明格式多备：woff2、woff、ttf，顺序上把压缩率更高的 woff2 放在最前面，其次 woff，最后才是 ttf。浏览器会按顺序挑第一个能用的格式下载，这样高版本浏览器优先拿到最小体积的文件。
2. 如果只需要部分字符集，很多国外字体服务可以通过 unicode-range 告诉浏览器按需加载，没必要全量下载几百 KB 的字体文件。
3. 处理加载期间的“隐藏文字”或“无样式文字闪烁”。可以使用 font-display: swap，意思是字体加载完成前先用系统字体兜底渲染，加载完成后再换过来。它的代价是文字可能发生一次跳动。为了兼顾速度与体验，可以组合使用 font-display: optional，这会让浏览器有机会在极短时间内放弃下载字体、保持系统字体，适合对视觉一致性要求不那么苛刻的页面。

再看效果动效题。面试官极少要求“背出 transform 语法”，但喜欢抛出一个场景：“有个按钮希望鼠标悬停时发散圆形涟漪光圈，从视觉角度看应怎么做？”
这里需要引出几个核心概念：Pseudo 元素 ::before/::after 绘制光圈，transform: scale() 控制扩大，opacity 控制淡出，再结合 transition 或 @keyframes 做时间轴。一个具体的最小实现可以这样写：

css复制.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.8;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.btn:hover::after {
  transform: translate(-50%, -50%) scale(10);
  opacity: 0;
}

演示完这个基础代码后，可以顺势接入性能优化，说“为了流畅，我一般会考虑用 transform 和 opacity 做动画，因为它们能交给 GPU 合成，不会像改 left、top 那样触发每一帧的布局回流”。这句话其实才是面试官藏在后面的考点。

4.4 CSS 选择器、删除线与竖向排列等容易被追问的细节

还要提一嘴面试中会出现的那些“小但能筛人”的细节题。比如热搜里那个怎么调整css容器里的文本位置，本质上考的是文本对齐的多层体系：容器内的行盒、文字水平对齐用 text-align，垂直方向要看是单行还是多行，单行可用 line-height 等于容器高度，多行可以考虑 flex 父容器并设置 align-items: center，或者给文本容器设置 display: grid; place-content: center。这几个方案都要能说出来。

css 文字竖着排列对应的知识点是 writing-mode: vertical-rl。面试时很可能让你实现“标题文字从上到下竖排”，你只写 writing-mode: vertical-rl 还得搭配文本顺序说明。还有用 letter-spacing 去控制竖排字符间距的问题，可以一并带上。

css 删除线这种细节题看似送分，其实也有区分度。除了 text-decoration: line-through，要不要继续问“如何只让文字删除线加粗/改变颜色而不影响文字本身”？如果只用 text-decoration，删除线的颜色会继承 text-decoration-color，并且很难单独调粗细；更精细的实现方式是给文字加一层 ::after 用一个绝对定位的 2px 横线覆盖在文字上方。这类补充通常不是必须的，但你能想到就说明你的 CSS 边界能力确实练出来了。

5. 实战编码题的高分策略：把“会背概念”变成“会做页面”的临场表达

5.1 水平垂直居中：建议从上往下答五种方案

CSS 面试中几乎没有比“请你让一个元素水平垂直居中”出现频率更高的实战题了。这题表面上是考记忆，实际上是在看你能不能把布局和定位的旧知识、现代 flex/grid 的新知识串在一起。

建议在面试现场按以下三类来答：

• 定宽高场景最简单：父元素 position: relative，子元素 position: absolute; left: 50%; top: 50%; margin-left: -自身宽一半; margin-top: -自身高一半。这种方法不需要知道 transform，兼容也最稳，缺点是需要维护自身的具体尺寸。
• 不定尺寸但只想兼容现代浏览器：position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)。transform 的百分比是相对自身尺寸的，所以不用知道宽高即可居中，这也是日常项目里最常用的一招。
• 使用布局上下文：给父元素 display: grid; place-items: center 或 display: flex; justify-content: center; align-items: center。grid 的 place-items 是 align-items 和 justify-items 的合体，代码更简短。

一个顺口、有经验感的表达是：“我会先判断这个元素是在普通文档流里还是浮层里，浮层多用 absolute + transform，页面主布局多用 grid 一行搞定。”这么答会体现你在选型而非只是背方案。

5.2 高度为宽度一半的经典题：撑住盒模型的自适应难题

热搜里有条很实战的词——css高度为宽度的50%。这个需求在很多视频封面、图片比例容器里会遇到：希望盒子的高度始终是其内容宽度的 50%，要求只写 CSS。如果天真地给高度写 height: 50%，写出来的盒子会被父容器高度卡住，并不是相对于自身宽度计算。

面试官想要的解法是用 padding 撑开高度，因为 padding 的百分比（包括 padding-top、padding-bottom）是根据父容器的宽度计算的，不是高度。如果你把盒子的 height 设 0，然后给 padding-bottom 设 50%，盒子高度就恒为宽度的 50%。

css复制.ratio-box {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  background: #ddd;
  position: relative;
}
.ratio-box .content {
  position: absolute;
  inset: 0;
}

这种容器内部的真实内容需要绝对定位，不然会被 padding 排挤到盒子外面。异步图片加载时也可以做成图片绝对定位填满整个区域，这样无论图片加载成功时尺寸如何，都不会破坏比例。

答题时如果能提一句“aspect-ratio 是更奢侈的解法”，会把这道题答得更完整：

css复制.aspect-ratio-modern {
  width: 100%;
  aspect-ratio: 2 / 1;
}

所有现代浏览器对 aspect-ratio 的支持都很好，所以实际项目中我反而更推荐这个。面试官问这个问题，其实是在考察你是否知道“旧时代怎么绕”与“新标准怎么爽”两条路线。

5.3 CSS 选择器根据参数使用不同类：把工程化思维带进答案

热搜里有一个细节词条很看得出提问者当时所处的真实困惑：css类根据参数不同使用不同的类。剥开表层，它是“如何动态控制样式”的工程问题，经常出现在组件库封装或表格动态列的场景。面试官可能给你一个 React/Vue 的小场景：“组件接收 status 参数，当 status 是 success、warning、danger 时，希望根元素应用对应颜色的类或样式，方案如何设计？”

这道题的最佳答案不是写一堆 if/else 去改 className，而是建立一个映射表，把“状态值到类名”的对应关系模式化，比如：

js复制const statusClassMap = {
  success: 'base success',
  warning: 'base warning',
  danger: 'base danger',
}

或者结合模板字符串，用 classnames 这类工具库动态拼接：

jsx复制<div className={classnames('status-icon', `status-${status}`)} />

在 CSS 侧，配合的设计思路是使用“修饰符”类名或 CSS 变量。比如我们可以把状态主题色收敛为 CSS 变量，这样后续替换主题时只需要覆盖变量值，不需要改每个状态下的具体样式。

css复制.status-success {
  --status-color: #22c55e;
}
.status-warning {
  --status-color: #f59e0b;
}
.status-danger {
  --status-color: #ef4444;
}
.status-icon {
  color: var(--status-color);
  border-color: var(--status-color);
}

能答到这一层，说明你有“设计系统初级思维”——面试官会很欣赏。因为大多数候选人还在想着用内联样式去高频修改某个颜色，而不是把颜色抽成规则、把规则放在可枚举的“状态类”上。

5.4 现场速写 CSS 时，这几条最容易让面试官直接拍板通过

最后说说面试现场手写 CSS 的临场表现问题。我见到过不少牛人简历写得很漂亮，但真给他一个空编辑器写一个标签页组件，他会花十分钟犹豫在类名命名和样式组织上，最后写出一个笨重且很难维护的版本。考场和真实项目一样，面试官要看的从来不是你的代码能否运行，而是你在短时间内做方案决策的成熟度。

• 先想共用样式，再想差异化。比如做一个标签页，先写 .tabs__nav、.tabs__item 基础样式，再写 .tabs__item.is-active 的状态覆盖。这一套下来，比从单个元素一点点堆样式要快得多。
• 习惯使用 CSS 变量。高频出现的圆角、颜色、间距建议直接定义为 --radius-md、--color-primary。手写代码时使用变量，至少说明你有设计 Token 意识。这比把 #1890ff 和 8px 写满全局要领先一个档次。
• 主动规避极端情况。比如给按钮加 white-space: nowrap，给图片容器加 overflow: hidden，给复杂动效加 will-change: transform。这些小细节通常不会出现在标准答案清单里，但却是业务中真正让人挠头的部分。
• 在基本布局中优先用 flex 处理单轴排布、用 grid 处理二维网格，避免用负 margin 和绝对定位强行拼装。面试官看到你用 flex/grid 的自然程度，就能判断出你是否真的跟这些现代布局工具打过日常交道。

6. 面试中的追问逻辑与回答节奏：怎么把 CSS 八股文答出记忆点

讨论完具体题目后，有必要说说让你临场不崩盘的回答策略。CSS 面试不同于算法面试，题目通常没有唯一的“最优解”，内核是通过你的表达判断你在实际工作中的状态。一个优秀的 CSS 对话往往符合这样的节奏：直接给结论 → 展现代码 → 解释原因 → 提一个边界情况或替代方案。

举个例子，当面试官问“有没有用过 CSS 变量”时，一个只答“用过，用来存主题色”的候选人只能拿及格分。但如果接着答：“我把设计稿里的 8 个颜色 token 全部抽象成了 --color-gray-50 这样的变量，然后在暗黑模式下只会改这几十个变量，不用逐个挑组件去覆盖。不过有一个注意点：CSS 变量不能直接用于媒体查询条件中，除非借助 @custom-media 这类新能力，因为媒体查询里只能写确定的值。”这个答案就构成了“结论 + 实践 + 边界”的闭环。

面试时也非常忌讳在两个话题之间反复横跳。当考官问 flex 子项宽度时，你就先回答 flex 的三大属性，答完所有方案后，再说实现中遇到过哪些坑。不要刚说完 flex-basis 这个概念就跳去聊 Grid 和嵌套布局，这样显得思维跳跃、逻辑不聚焦。就算你只会当前这一道题，也应该在这一道题内部给出系统性：从基准值到变体到边界案例，节奏稳住。

如果遇到不会的题，也不要直接说“这个我没用过”。有经验的候选人会把问题引到自己能覆盖的区域，比如问“CSS 滚动时间线你了解吗？”你可以回答：“特性本身我知道大概作用，但还没有在生产环境实际用过，如果现在要我快速上手，我会先去 MDN 查一遍语法，再找一段官方示例小步验证。”这个回答依然展现了“学习路径清晰”，面试官不会因为你没实际用过而直接淘汰你。

现在 2026 年的前端面试，CSS 考点已经从过去“你写页面熟不熟”的浅层判断，演进为“你有没有设计系统的抽象能力，能否跟上现代 CSS 的迭代节奏”的深水区考察。在准备这一套核心面试题时，如果不花时间亲手把每个知识点做成可运行的小 Demo，即便背下整本文档，到现场也很容易被一句追问打回原形。我对自己的要求是老规矩：每个知识点都要能落到一段真实可复现的代码和至少一个真实项目事故上，这条经验送给你，祝你面得顺、答得深。