这份CSS面试速查表按面试高频主题梳理级联、specificity、盒模型、Flexbox、Grid与响应式，帮你把“为什么”讲清楚，快速提升回答质量，值得一看。
大多数 CSS 面试失败并不是知识不够。很多候选人花了好几周复习各种属性，可一旦面试官问“你为什么在这里选 flexbox？”或者“如果把那个 `overflow: hidden` 去掉会发生什么？”，还是会卡住。这才是这份用于面试准备的 CSS 速查表要解决的真正问题——不是让你背更多属性，而是给你一层“为什么”的思考，帮你把记忆变成答案。
CSS 很容易零散地学会。你可能从一个教程里学到 flexbox，从 Stack Overflow 的一个回答里学到 specificity，从速成课里学到盒模型。结果就是一套拼拼凑凑的知识，拿来做项目勉强够用，但在面试的特定压力下就会崩掉，因为面试的追问永远围绕的是“为什么这么选”，而不是“这是什么”。下面这些部分的组织方式，也不是按教材来的，而是按面试官真正会怎么追问来排的。
先从最能在面试里派上用场的 CSS 主题开始
按面试官真正会考的内容来安排复习顺序
CSS 面试准备最常失败的原因，是候选人按教材顺序复习——先属性，再选择器，再布局——而不是按面试收益顺序来学。教材顺序适合从零搭建心智模型；但如果你三天后就要面试，最重要的是知道问题会落在哪里，这种顺序就不合适了。
根据前端招聘流程中的常见模式，初中级前端面试里最稳定出现的内容通常集中在五个区域：CSS 如何作用到页面上（级联、特异性、继承）、盒模型及其失效方式、flexbox 和 grid 及其边界情况、响应式行为，以及——对于中级岗位来说——那些能看出你是否真的理解 为什么 CSS 会这样工作的高级概念，而不只是知道它 会 这样。float 和 clear 还是会出现，但更多是用来铺垫背景，而不是决定去留的关键题。
实战里会是什么样子
一个适合一次性复习、并且贴合面试优先级的路径是这样的：先确认你能解释 CSS 是如何被应用到页面上的，以及到底是什么决定哪条规则胜出。然后转到盒模型，确保你能描述一个由它引发的布局 bug。接着把 flexbox 和 grid 放在一起看——不要分开看——因为面试官几乎总会让你比较它们。之后再过一遍响应式行为和考虑无障碍的 CSS。把 BFC、stacking context 和 container queries 放到最后——这些题最能区分真正理解 CSS 心智模型的人和只是用过它的人。
在进入下一部分之前，先用 MDN CSS 文档核对你对每个区域的理解，这是最可靠的参考。不要从头读到尾——先试着把每个概念自己大声讲一遍，再把它当作验证层来查。
把 CSS 如何作用到页面上讲清楚，但不要像背过术语表一样
内联、内部和外部 CSS，本质上是在讲作用范围和控制权
“内联、内部和外部 CSS 的区别是什么？”最显而易见的回答是：内联写在 `style` 属性里，内部写在 `<head>` 里的 `<style>` 标签里，外部放在 `.css` 文件里。每个候选人都会这么答。面试官也都知道。接下来他们真正想听的是：你是否明白这些区别在真实项目里为什么重要。
真正的故事是关于作用范围、覆盖能力和复用性。内联 CSS 在这三者中有最高的 specificity，但几乎没有复用性——它只作用于一个元素，不能共享，而且要想干净地覆盖它，往往只能借助 `!important`。内部 CSS 只作用于单个页面，适合页面级覆盖或原型验证，但只要两个页面需要同一条规则，维护问题就来了。外部 CSS 是生产环境的默认选择，因为它职责分离、支持缓存，而且是唯一能在组件库或多页应用中规模化使用的方式。
实战里会是什么样子
想象三个场景：你在做 HTML 邮件，而外部样式表通常不会被加载，这时内联 CSS 是有理由的，因为你没有更好的选择。你在做一个一次性的落地页，需要一个只在这里生效的样式覆盖——这时在 `<head>` 里放一个 `<style>` 块就足够了。你在维护一个设计系统，里面有共享的按钮、卡片和表单组件——这时外部 CSS 是唯一合理的选择，因为别的方式都会迫使你在多个地方更新同一条规则。
实际开发里，把样式从内联迁到外部，几乎都是因为有人想覆盖它，却没法预测到底哪条规则会赢。这是由作用范围问题引发的 specificity 问题。关于样式表组织方式的 CSS 面试题，答案永远会回到同一个问题：你优化的是写得快，还是维护起来省心？
把 specificity 讲得无聊一点，反而最好
当选择器打架时，谁会赢
Specificity 是 CSS 的冲突解决算法。当两条规则都命中同一个元素时，浏览器需要一种方式决定哪一条生效。这个决定遵循特定顺序：内联样式会赢过除 `!important` 之外的一切。之后，ID 选择器的优先级高于 class 选择器、属性选择器和伪类。它们又高于元素选择器和伪元素。通配选择器（`*`）和组合器不会增加 specificity 权重。
组合器——后代（空格）、子代（`>`）、相邻兄弟（`+`）、通用兄弟（`~`）——告诉浏览器去哪里找元素，但不会改变它们所连接的选择器的 specificity。像 `:hover` 或 `:nth-child()` 这样的伪类，权重和 class 选择器一样。像 `::before` 或 `::after` 这样的伪元素，权重和元素选择器一样。级联顺序——源码顺序、重要性、来源和 specificity——则在其他条件都相同时决定哪条规则胜出。
CSS Cascade 规范是这里的权威来源。知道它存在，并且能描述它的层级，本身就是面试官会注意到的信号。
实战里会是什么样子
想象一个生产组件，按钮的基础样式定义为 `.btn { background: blue; }`。后来开发者又加了一条更具体的规则：`nav .btn { background: gray; }`。导航栏里的按钮变成灰色——这符合预期。可第三个开发者又加了 `.btn--primary { background: green; }`，希望它能覆盖导航规则，但没有生效，因为 `.btn--primary`（一个 class）输给了 `nav .btn`（一个元素加一个 class）。解决办法不是加 `!important`，而是要理解到底是哪条选择器链在胜出，然后要么匹配它的 specificity，要么重构选择器层级。
为什么 !important 像捷径，而且通常确实是
`!important` 有正当用途：比如设计系统里的工具类，明确就是用来覆盖一切的（想想 Tailwind 的 `!` 前缀）；比如无障碍相关的浏览器覆盖；或者你无法控制的第三方样式重置。在这些情况下，`!important` 是有明确理由的文档化决定。
维护上的陷阱，是把它当成逃离一场你并不真正理解的 specificity 争夺的办法。每加一个 `!important`，就给下一次覆盖抬高了门槛。一旦有两条 `!important` 声明指向同一个属性，你又回到了 specificity 的解决方式，只是现在多了一层混乱。面试里更讨喜的回答是：“我只会在有意覆盖一个我不能改的外部规则或工具类时使用 `!important`，而不是用它来修复自己制造出来的 specificity 冲突。”
用盒模型解释为什么布局会以那些烦人但熟悉的方式坏掉
盒模型就是“好好的布局”变成溢出的地方
CSS 里的每个元素都是一个盒子。这个盒子有四个区域：content（内容）、padding（内容和边框之间的空间）、border（元素边缘）和 margin（边框外的空间）。面试陷阱不是让你说出这四个区域，而是要你解释：当你给一个固定宽度的元素加上 padding 或 border 时，为什么布局会以一种说不清的方式坏掉。
默认行为（`content-box`）意味着 `width` 只设置内容区域。给一个 `width: 200px` 的元素加上 `padding: 20px`，最终渲染出来的元素就变成了 240px 宽。这会让原本以为元素仍然是 200px、padding 只是待在内部的人感到意外。这就是卡片栅格、侧边栏和弹窗里经常出现的盒模型 bug。
box sizing 是那条虽然很小、却能省下很多痛苦的 CSS 语句
`box-sizing: border-box` 会改变模型，让 `width` 包含 padding 和 border——元素仍然是 200px 宽，而 padding 会压缩内容区域，而不是把元素撑大。大多数现代 CSS reset 都会全局应用 `border-box`：
面试官很喜欢把这个和 overflow 失效方式一起问，因为这样能看出你是否理解这个 reset 为什么 存在，而不只是在哪个入门模板里见过它。MDN 盒模型文档用可视化图示讲解了这两种模型，面试前很值得看一遍。
实战里会是什么样子
一个 `width: 100%` 且 `padding: 24px` 的卡片组件，在 `content-box` 下会溢出容器，因为 100% 宽度再加上 48px 的水平 padding，已经超过了容器宽度。切换到 `border-box` 后，卡片就会待在容器内，因为 padding 被吸收到 100% 宽度里了。侧边栏和模态遮罩层也会遇到同样的问题。面试里能拿分的回答方式是：说出模型、解释默认行为、指出失效方式、给出修复方案——四句话就把面试官真正想知道的内容讲全了。
像做过 Flexbox 和 Grid 的人一样选择它们
Flexbox 是一条线，Grid 是一张地图
解释 flexbox 和 grid 区别，最清晰的方式是：flexbox 是一维的——它处理一行 或 一列。Grid 是二维的——它同时处理行 和 列。这一句是面试回答的正确起点，但还不是全部。
当你希望元素沿单一轴流动并分配空间时，flexbox 是正确工具——比如导航栏、一排按钮、一串横向标签。当地行和列之间的关系很重要时，grid 才是正确工具——比如商品卡片栅格、仪表盘布局、或者需要头部、侧边栏和内容区同时在两个轴上对齐的页面模板。
很多人会忘记提的失效场景
Flexbox 最常被跳过的失效场景是：flex items 默认有 `min-width: auto`，这意味着包含长文本或宽图片的 flex 子项，不会缩到比其内容大小更小。修复方法是在 flex 子项上加 `min-width: 0`。如果不加，原本应该换行或收缩的一排卡片就会溢出容器。这种具体的失效模式，正好能区分“真正在项目里用过 flexbox”的候选人和“只读过文章”的候选人。
Grid 的尺寸惊喜通常来自 `auto-fill` 和 `auto-fit` 的区别。它们都会根据容器宽度创建尽可能多的列，但 `auto-fit` 会折叠空轨道，让项目拉伸去填满整行。`auto-fill` 会保留空轨道，因此项目不会拉伸。在一个商品卡片网格里，如果你希望三张卡片铺满整行，而不是都挤在左边，通常要用 `auto-fit`。面试官之所以会问这个区别，是因为它只有在布局在生产环境里表现出意外行为时，才会真正被看明白。
实战里会是什么样子
一排商品卡片，一开始更像 flexbox 的工作；但如果你需要这些卡片跨行对齐，那它就变成 grid 的工作了。一个带头部、左侧导航、主内容区和页脚的仪表盘，从一开始就该用 grid，因为这些区域之间的关系本来就是二维的。关于“什么时候用哪个？”的面试答案，结尾一定要落到一个具体例子，而不是抽象原则。说说你做过什么，以及你当时为什么选它。
CSS-Tricks 的 Flexbox 完整指南以及它对应的 Grid 版本，至今仍然是查看这些属性和行为最可靠的速查资料。
明白 float 和 clear 为什么还会出现在面试里，尽管它们已经输了
Float 是一堂有用的历史课
Float 的设计初衷，是让文字围绕图片排版——就像印刷版式里，一张照片放在文字栏中，文字自然环绕它。它从来不是为布局工具而设计的。前端社区却用了它大约十年，因为当时没有更好的选择，结果是功能勉强可用，但很脆弱。清除浮动——要么在后续元素上写 `clear: both`，要么用 clearfix 技巧——是为了应对这样一个事实：浮动元素会脱离正常文档流，导致父容器被压缩塌陷。
Flexbox 和 grid 已经完全取代了新项目里的基于 float 的布局。float 之所以还会出现在前端 CSS 面试题里，是因为面试官想知道你是否理解 为什么 这个转变发生了，而不只是知道它发生了。理解 float，就意味着理解正常文档流；理解正常文档流，也就意味着理解现代布局工具是如何偏离它的。
实战里会是什么样子
最经典的例子，是一张左浮动的图片，文字在右侧环绕它。给图片加上 `float: left`，文字就会沿着它排开。给下面的页脚加上 `clear: left`，页脚就会掉到浮动元素下面，而不会和它并排。在现代代码里，你大概率会用 grid 或 flex 容器来实现这个效果。面试时好用的答案是：先准确描述 float 和 clear 的工作方式，然后说在新项目里你会选 flexbox 或 grid，并说明原因——溢出行为更可预测，对齐更可控，而且不需要靠 clearfix hack 来防止父容器塌陷。
在中级 CSS 面试里表现得像是跟得上变化，但不要假装所有高级特性都是日常工作
BFC、stacking context 和 container queries 才是检验真实理解的东西
Block Formatting Context（BFC）是 CSS 布局模型中的一个独立渲染环境。BFC 内部的元素不会和外部的浮动元素互相影响，而且 BFC 自己也能包含内部浮动。通过 `overflow: hidden`、`display: flow-root` 或 `contain: layout` 触发 BFC，是避免浮动塌陷、而不借助 clearfix hack 的干净方式。面试官之所以会问 BFC，是因为这能看出你是否理解 `overflow: hidden` 为什么能解决浮动塌陷，而不只是知道它“确实能”。
Stacking context 是控制 z-index 层叠的机制。带有 `position` 且 `z-index` 不是 `auto` 的元素、`opacity` 小于 1 的元素、`transform`、`filter` 以及其他一些属性，都会创建新的 stacking context。常见 bug 是：一个模态框或 tooltip 明明有 `z-index: 9999`，却还是被别的元素盖住，因为它的父元素创建了一个更低层级的新 stacking context。修复它需要理解 stacking context 的层级关系，而不是单纯继续加大 z-index。
Container queries——现在已经被广泛支持——允许组件根据自身容器的大小，而不是视口大小来响应。这把响应式设计从页面级问题，变成了组件级问题。一个卡片组件可以在容器变窄时自动重排内部布局，而不管视口此刻是什么宽度。
逻辑属性和响应式媒体查询应该显得实用，而不是赶时髦
逻辑属性（比如用 `margin-inline-start` 代替 `margin-left`，用 `padding-block-end` 代替 `padding-bottom`）映射的是文档的书写方向，而不是物理方向。在从左到右的布局里，它们和物理属性表现相同；在从右到左的布局里——比如阿拉伯语、希伯来语、波斯语——它们会自动翻转。使用逻辑属性，是让国际化不再被当成事后补丁的 CSS 决策。
`prefers-reduced-motion` 让你可以为在操作系统层面设置了偏好减少动画的用户，禁用或减弱动画。`prefers-color-scheme` 让你能够响应系统的暗色模式。这些并不是无障碍的边角情况——它们是让产品显得经过深思熟虑，而不是随便拼起来的 CSS 选择。
实战里会是什么样子
一个下拉菜单被卡片盖住的 z-index bug，几乎总是 stacking context 问题。卡片为了 GPU 合成优化用了 `transform: translateZ(0)`，这会创建一个新的 stacking context，而下拉菜单——作为那个卡片的子元素——无论 z-index 多大都逃不出去。修复方式是重构 DOM，让下拉菜单成为该 stacking context 的兄弟节点，而不是它的子节点。这种排障故事，最能让中级 CSS 的回答听起来像是“真做过”。
回答响应式和无障碍问题时，要表现得你真的在意用户感受
响应式 CSS 不只是断点和想当然
响应式 CSS 的核心是布局韧性——确保当容器变化时，内容能够优雅重排，而不只是等视口碰到某个预设断点才变化。以断点为中心的思维，在组件被放到多个不同宽度的上下文里时就会失效。Container queries 在组件层面解决这个问题。使用 `clamp()` 的流式字体排版，则在文字层面解决它。面试里更得体的回答，会把响应式行为看作布局的一种连续属性，而不是一串 if/else 切换。
CSS 里体现无障碍的地方，比很多人承认的更多
对比度、焦点可见性、减少动效，以及颜色方案处理，都是 CSS 决策。WCAG 2.1 要求普通文本的最小对比度为 4.5:1。焦点指示器——用 `:focus-visible` 而不是 `:focus`——需要在不打扰鼠标用户界面的情况下仍然清晰可见。去掉 `outline: none` 却不提供替代焦点样式，是生产环境 CSS 里最常见的无障碍失败之一。凡是不影响理解界面的动画，都应该用 `prefers-reduced-motion` 包起来。
实战里会是什么样子
一个在断点处折叠成汉堡菜单的导航组件，需要同时处理焦点管理、浅色和深色模式下的对比度，以及打开/关闭过渡中的动效。这个过渡动画的 CSS 应该放在 `@media (prefers-reduced-motion: no-preference)` 块里，这样请求减少动效的用户看到的是即时状态变化，而不是动画。这种回答最能说明候选人考虑的是用户，而不只是浏览器。
常见问题
问：前端面试里最可能出现哪些 CSS 主题，应该按什么顺序复习？
先从 cascade、specificity 和 inheritance 开始——它们是所有其他 CSS 问题的基础。然后过盒模型和 `box-sizing`，再把 flexbox 和 grid 放在一起学，接着看响应式行为和媒体查询，最后再复习 BFC、stacking context 和 container queries 这类中级主题。这个顺序既符合面试出现频率，也能让每个概念建立在前一个概念之上。
问：在面试里，我该怎么清楚地解释内联、内部和外部 CSS 的区别？
先给出一句机械层面的定义（每种 CSS 放在哪里），然后立刻转到取舍：内联 specificity 最高但不可复用，内部样式只作用于单页，适合原型验证，外部 CSS 则是生产默认方案，因为它职责分离且可扩展。面试官真正听的是你对取舍的理解，而不是定义本身。
问：什么时候用 Flexbox，什么时候用 Grid？我应该提哪些常见失效场景？
一维流动就用 flexbox——比如导航栏、一排标签、一列表单项。行和列需要同时对齐时就用 grid——比如卡片栅格、仪表盘布局、页面模板。值得提的失效场景有两个：flex item 在没有 `min-width: 0` 时不会缩到比 `min-width: auto` 更小；`auto-fill` 和 `auto-fit` 在稀疏网格里会产生不同表现。
问：选择器、组合器、伪类和 specificity 到底怎么影响最终哪个样式胜出？
Specificity 是分层计算的：内联样式胜过 ID 选择器，ID 选择器胜过 class 选择器和伪类，class 选择器和伪类又胜过元素选择器和伪元素。组合器不增加权重——它们只是缩小目标范围。当 specificity 相同时，源码顺序决定胜负。实战里的答案是：先追踪胜出规则的选择器链，再考虑要不要用 `!important`。
问：盒模型和 `box-sizing` 有哪些面试官爱考的坑？
主要坑点是：在默认的 `content-box` 下，padding 和 border 会把元素撑到超出设定宽度。`box-sizing: border-box` 会把 padding 和 border 计入宽度，让尺寸更可预测。面试官之所以爱考这个，是因为它能解释一整类看起来莫名其妙、实则是模型导致的布局溢出问题。
问：float 和 clear 怎么工作？为什么现代布局里大多不用它们了？
Float 会把元素从正常文档流中移出，并让相邻内容环绕它。`clear` 则会阻止后续元素和浮动元素并排。它们在 flexbox 和 grid 出现之前，被用来实现多列布局。现在之所以大多不用了，是因为浮动布局需要 clearfix 技巧来防止容器塌陷，而 flexbox/grid 在对齐和分配空间方面更可预测。
问：中级面试应该了解哪些高级 CSS 主题，比如 BFC、container queries 和逻辑属性？
你需要足够了解 BFC，能解释为什么 `overflow: hidden` 可以包含浮动（因为它触发了新的格式化上下文）。你需要足够了解 stacking context，能排查由父元素的 `transform` 或 `opacity` 引起的 z-index 失败。你需要了解 container queries，知道它是视口媒体查询的组件级替代方案。只要一谈国际化或 RTL 支持，逻辑属性就很值得提。
问：为了显得跟得上变化、又实用，我应该提哪些 CSS 无障碍和响应式概念？
可以提 `prefers-reduced-motion` 处理动画，提 `prefers-color-scheme` 处理暗色模式，提 `:focus-visible` 处理键盘导航，再提 WCAG 的文本对比度要求。响应式方面，可以提 `clamp()` 做流式排版，提 container queries 做组件级响应式。这些不必是你回答的中心，但如果你能自然提到它们，就说明你考虑的是用户，而不只是浏览器。
Verve AI 如何帮助你准备 CSS 面试
CSS 面试准备的结构性问题，不在于你不知道材料，而在于：在实时压力下解释一个布局决策，和真正把这个布局做出来，是两种完全不同的能力。你可能非常清楚什么时候该用 grid 而不是 flexbox，可当面试官问“这里为什么不用 flexbox？”时，还是会给出一段绕来绕去的回答，因为你从没在实时状态下把推理过程清晰说出来过。
Verve AI Interview Copilot 就是为这个缺口设计的。它会实时聆听正在发生的对话，并根据你实际说了什么作出回应，而不是只对着预设提示作答。所以当你在练习 specificity 的解释，而追问变成“如果代码库里已经有 `!important`，你会怎么办？”，Verve AI Interview Copilot 会基于你刚刚说的话，给出答案的下一层，而不是套一个通用模板。练习流程会尽量贴近真实面试的压力：一个问题、你的回答、一个检验边界的追问。Verve AI Interview Copilot 在这个过程中保持隐身，所以体验几乎和真实面试环境没有区别。对 CSS 准备来说，这意味着你可以反复练习盒模型、flex 溢出和 stacking context 的解释，直到它们听起来像“决策”，而不是“定义”——这也正是面试官真正想听到的。
结论
强有力的 CSS 面试回答，讲的是决策，而不是定义。能通过技术面试的人，不是那些能背出所有属性的人，而是那些能说出“我选择 flexbox 是因为这个布局是一维的，我需要元素沿单一轴分配空间，而且如果它开始溢出，我会注意什么”的人。这就是一个决策。它有原因、有失效方式，也有替代方案。
在下一次面试前，重点回头复习三个部分：specificity 那一节（因为每一个 CSS 问题最后都会变成 specificity 问题），flexbox 和 grid 那一节（因为这两个的比较几乎必然会被问到），以及响应式和无障碍那一节（因为不经提示地提到 `prefers-reduced-motion` 或 `:focus-visible`，往往就是区分中级和初级候选人的信号）。这份指南的其他内容是复习，而这三部分是杠杆。
Quinn Okafor
归档内容