企业官网建设流程全解析

Front End Interview Handbook CSS 面试问题全解：层叠规则、盒模型、BFC 与现代布局实战

【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbook

CSS 面试是前端岗位考察中占比极高的一环，本指南以front-end-interview-handbook仓库中沉淀的 CSS 面试问答集为骨架，系统梳理从选择器特异性、盒模型到浮动清除、BFC、z-index、响应式布局与渲染性能的完整知识体系。阅读本文后，你将掌握这套经典 CSS 面试题的标准化表述、底层浏览器行为逻辑，并能顺着仓库内的多语言文档与逐题问答卡片继续自查与背诵。

这套 CSS 问答在仓库中的组织方式

本仓库把"CSS 面试问题与答案"以三种形态沉淀下来，成文前建议先了解它们的关系：

• 英文主文档：website/contents/css-questions.md（约 500 行）是答案集的权威版本，每个问题一个 H3，末尾附参考链接；
• 多语言翻译：主文档被同步到website/i18n/下各语言目录，其中 tl（他加禄语/菲律宾语）译本即本文的骨架来源 website/i18n/tl/docusaurus-plugin-content-docs/current/css-questions.md，与html-questions.md、javascript-questions.md同目录存放；
• 逐题问答卡片：packages/quiz/questions/下按问题 slug 建目录，每题包含en-US.mdx、zh-CN.mdx、pt-BR.mdx、metadata.json等多文件，供交互式刷题与对照。

需要说明的是，这套问题清单最初源自 h5bp 的 Front-end Job Interview Questions 中的 CSS 问题集，仓库文档是对这些问题的逐条作答。在 tl 译本中，个别问题（如display属性详解、响应式与移动优先的差异）仍标记为 TODO，本文会同时引用英文主文档与 quiz 卡片的完整答案予以补全，保证你拿到的是一份"可直接背诵"的完整版本。

一、层叠与选择器：浏览器如何决定"用哪条样式"

CSS 选择器特异性（Specificity）是如何计算的

浏览器决定元素显示哪种样式，取决于 CSS 规则的特异性（specificity）。假设浏览器已经确定了一组与某元素匹配的规则，那么在这些匹配规则中，会对每条规则计算一个四段式、以逗号分隔的权重a, b, c, d：

1. a：是否使用了内联样式。若属性声明写在元素上的style内联样式里，a为 1，否则为 0；
2. b：ID 选择器的数量；
3. c：类选择器、属性选择器与伪类选择器的数量；
4. d：标签（类型）选择器与伪元素选择器的数量。

关键点：特异性不是"总分"，而是一个可逐列比较的权重矩阵。比较两条选择器谁的特异性更高时，要从左往右看，逐列比较每一列的最大值：b列（ID）的取值会压过c、d两列的任何数值，c列（类/属性/伪类）又压过d列。因此特异性0,1,0,0大于0,0,10,10——即使后者类选择器多达 10 个。

仓库 quiz 卡片的同题解答（what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx）把这一算法概括为更易记忆的三列ID - CLASS - TYPE，并把它放回完整的 CSS 级联链条中定位：!important声明优先级最高，其次才是内联样式，再次是选择器特异性，最后才是源码顺序。

特异性相同时：最后出现（更靠后）的那条规则生效。若你在样式表里把同一条规则写了两次（无论内外部样式），靠下的那条离元素更近，被视为"更特异"而生效。

实战建议（文档原话的核心结论）：尽量写低特异性的 CSS 规则，方便后续按需覆盖。在编写 CSS UI 组件库时尤其重要——库作者应让组件样式保持低特异性，用户才能在不用写出冗长选择器、也不必动用!important的前提下覆盖默认样式。

浏览器如何确定元素匹配了哪条选择器：从右向左匹配

这与"高效 CSS"直接相关。浏览器从最右侧的"关键选择器（key selector）"开始向左匹配。浏览器先按关键选择器在 DOM 中筛出元素，再向上遍历其父级元素确认是否匹配。选择器链越短，浏览器判断"该元素是否命中"就越快。

以p span为例：浏览器先找出页面上所有<span>，然后逐个向上遍历祖先直到根节点，查找<p>。对某个具体的<span>，一旦找到<p>，浏览器就知道它命中规则、立即停止匹配。因此避免把标签选择器或通配符当关键选择器——它们会命中海量元素，迫使浏览器做大量祖先遍历工作。

Reset 与 Normalize：选哪个、为什么

• Reset（重置）：目的是剥离浏览器在元素上的一切默认样式。例如把所有元素的margin、padding、font-size统一归零或统一化，代价是你必须为常见的排版元素（标题、段落、列表）重新声明样式。
• Normalize（归一化）：保留浏览器"有用"的默认样式，而非清空一切；同时修正各浏览器对通用特性的渲染 bug（例如表单控件、HTML5 元素的默认表现差异）。

文档给出的取舍建议：当你的站点设计高度定制、非典型，绝大部分样式都要自己写、不需要任何默认样式被保留时，选择 Reset；反之需要保留基础排版默认值时选 Normalize.css。

二、盒模型：尺寸计算、显示类型与box-sizing

盒模型如何决定元素尺寸

CSS 盒模型描述文档树中每个元素生成的矩形盒子，并按视觉格式化模型排布。每个盒子都有内容区（文本、图片等），外面可选地包裹padding、border与margin区域。

盒模型负责回答三类问题：块级元素占据多少空间；border/margin是否重叠或折叠；盒子本身的尺寸。其基本规则如下：

• 块级元素的尺寸由width、height、padding、border、margin共同决定；
• 未指定height时，块级元素高度等于内容高度加padding（除非含浮动子元素，见下文 float 塌陷）；
• 未指定width时，非浮动块级元素会横向撑满父容器宽度减去padding；
• 元素的height/width默认按内容的height/width计算；
• 默认情况下，padding与border不计入元素的width和height（即content-box模型）。

* { box-sizing: border-box; }做了什么、有何好处

• 默认元素采用box-sizing: content-box，只有内容尺寸被计入宽高；
• box-sizing: border-box改变宽高的计算方式，把border与padding一并计入：height = 内容高 + 垂直 padding + 垂直 border 宽度，width = 内容宽 + 水平 padding + 水平 border 宽度；
• 把padding、border纳入盒模型后，开发者设置元素宽度时无需再心算"内容到底该多宽"，这与设计师在网格中想象内容占据空间的方式一致，配合百分比栅格布局时尤其省心。这也是现代 CSS Reset/Normalize 策略普遍以html { box-sizing: border-box; } * , *::before, *::after { box-sizing: inherit; }作为基线的根本原因。

仓库 quiz 中另有同主题卡片可对照：what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.mdx 与 explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx。

display属性的取值与语义

display决定盒子在文档流中的表现方式。常见取值包括：none、block、inline、inline-block、flex、grid、table、table-row、table-cell、list-item。tl 译本此处仅罗列了值并标记 TODO，英文主文档给出了完整语义表：

inline、inline-block与block三者的区别

tl 译本用一张对照表给出了面试中最标准的回答（并注明"把block也拉进来做对比，效果更好"）：

三、布局与定位：float、clearfix、BFC、position、z-index

float浮动及其工作原理

浮动是 CSS 定位属性之一。浮动元素仍是页面文档流的一部分，会影响其它元素的位置（例如文字会环绕浮动元素排布）——这与position: absolute不同，后者会把元素从页面流中完全移除。

CSS 的clear属性用于把某元素放到left/right/both浮动元素的下方。

高度塌陷：若父元素内只有浮动元素、没有别的普通流内容，父元素高度会塌陷为 0。修复方法是在容器内、闭合标签之前清除浮动。同题的仓库 quiz 卡片还补充了一条时代背景（describe-floats-and-how-they-work/zh-CN.mdx）：过去诸如 Bootstrap 2 的 CSS 框架用float实现网格系统；如今有了 Flexbox 与 Grid，已无需再用浮动做布局。

Clearfix 技巧与代码

.clearfixhack 借助巧妙的伪元素选择器（::after）来清除浮动。与其在父元素上设置overflow，不如给它追加一个clearfix类，再应用这段 CSS：

.clearfix::after { content: ' '; visibility: hidden; display: block; height: 0; clear: both; }

另一种方案是给父元素设置overflow: auto或overflow: hidden——这会为子元素建立一个新的块格式化上下文（BFC），使父元素自动扩展以包含其浮动子元素。

清理浮动的各种手法与适用场景

• 空div法：在浮动内容后放一个<div style="clear:both;"></div>；
• Clearfix 法：使用上文.clearfix类；
• overflow: auto/overflow: hidden法：父元素建立新的 BFC 并扩展包住浮动子元素。

文档给出的工程经验：在大型项目里，应把.clearfix写成可复用的工具类，按需到处使用；overflow: hidden在子元素比父元素更高时可能把子元素裁切掉，并非理想选择。

块格式化上下文（BFC）：是什么、如何形成

块格式化上下文（Block Formatting Context）是网页视觉 CSS 渲染的一部分，块级盒子在其中进行排布。浮动、绝对定位元素、inline-block、table-cell、table-caption，以及overflow值非visible的元素（除非该值已传播到视口），都会建立新的块格式化上下文。

了解 BFC 很重要：如果不创建它，包含框将无法包住浮动子元素，表现为整个父盒子以怪异的方式塌陷——这与外边距折叠相似但更隐蔽。

一个 HTML 盒子只要满足下列任一条件即成为 BFC：

• float的值不是none；
• position的值既不是static也不是relative；
• display的值为table-cell、table-caption、inline-block、flex、inline-flex、grid或inline-grid（注意：quiz 卡片 describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx 相比 tl 译本额外纳入了grid/inline-grid，对应现代布局体系的演进）；
• overflow的值不是visible。

BFC 的行为特性：

• 在 BFC 内，每个盒子的左外边与包含块的左边缘相触（从右到左书写时则是右边缘相触）；
• 同一 BFC 内相邻块级盒子的垂直外边距会折叠；但 BFC 能阻止其内部元素与外部元素的边距折叠——这正是用 BFC 隔离布局、杜绝"边距泄漏"的原理。

position：static、relative、absolute、fixed、sticky

"定位元素"指计算后position为relative、absolute、fixed或sticky之一的元素。各取值的语义（对应 quiz 卡片 whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.mdx）：

• static：默认定位，元素按常规流入页面；top、right、bottom、left、z-index均不生效。
• relative：相对元素自身位置做偏移，不改变布局（会为元素保留它未定位时本应占据的空隙）。
• absolute：元素脱离文档流，相对于最近的已定位祖先（若有）定位，否则相对初始包含块定位；绝对定位盒子可以有 margin，且不与任何其它 margin 折叠；不影响其它元素位置。
• fixed：元素脱离文档流，相对视口定位，滚动页面时位置不动。
• sticky：相对定位与固定定位的混合体。元素先被当作relative，一旦越过指定阈值（如top: 0）就被当作fixed固定住。

z-index与堆叠上下文的形成

z-index控制重叠元素的垂直堆叠顺序，且只对position值非static的元素生效。

没有任何z-index时，元素按在 DOM 中出现的顺序堆叠（同一层级中，位于文档靠后的元素显示在靠上）。非静态定位的元素（及其子元素）总是显示在默认static定位元素之上，与 HTML 层级无关。

**堆叠上下文（stacking context）**是包含一组图层的元素：

• 在局部堆叠上下文中，子元素的z-index是相对该上下文元素设置的，而不是相对文档根；
• 上下文外部的图层（即该堆叠上下文的兄弟元素）无法插入到其内部图层之间——若元素 B 在元素 A 之上，那么 A 的子元素 C 无论z-index多高，永远不可能高过 B；
• 每个堆叠上下文自包含：元素内部内容堆叠完成后，整个元素作为一个整体参与父级堆叠上下文的排序；
• 少数 CSS 属性会触发新堆叠上下文：opacity小于 1、filter非none、transform非none等（quiz 卡片 describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx 还提示：究竟哪些属性会创建堆叠上下文，MDN 有一长串规则清单，排查"z-index 不生效"时应逐一核对）。

为什么动画用translate()优于absolute定位

translate()是 CSStransform的值。修改transform或opacity不会触发浏览器的 reflow 或 repaint，只会触发合成（compositing）；而修改绝对定位的top/left等属性会触发 reflow。transform会让浏览器为该元素创建 GPU 图层，绝对定位属性的修改则走 CPU。因此translate()更高效，绘制时间更短，动画更平滑。同时注意：使用translate()时元素仍占据原始空间（有点像position: relative），与修改绝对定位时元素脱离文档流的行为不同。

四、响应式与多端适配：栅格、媒体查询与高清屏

你用过哪种栅格系统？

在 Flex 流行（约 2014 年）之前，基于float的栅格系统是兼容性最好的方案，Bootstrap 在升级到基于flex的 Bootstrap 4 之前一直使用float。文档作者补充道：截至写作时（2020），flex已是构建栅格系统的推荐方式并拥有良好浏览器支持；更前沿的选择是 CSS Grid Layout，用全新的grid属性，构建网格布局比flex更顺手，未来将成为事实标准。仓库 quiz 卡片 have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx 同题呼应：Flexbox 面向 1 维布局，Grid 面向 2 维布局。

媒体查询与移动专属布局的实践

文档给出的实例：在某断点之上，把竖向堆叠的 pill 导航改造成固定底部的 tab 导航——这正是"移动端适配"的典型手法。相关内容也可对照 quiz 卡片 have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/zh-CN.mdx 与 can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx。

除screen外还有哪些@media类型？

共有四类（含screen）：

• all：适用于所有媒体类型设备；
• print：适用于打印机；
• speech：适用于"朗读"页面的屏幕阅读器；
• screen：适用于电脑、平板、智能手机等屏幕。

print媒体类型示例：

@media print { body { color: black; } }

仓库 quiz 同题卡片见 can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx。

响应式设计与"移动优先"策略有何区别？

tl 译本此处仍为 TODO，英文主文档（website/contents/css-questions.md）给出了完整答案——二者并不互斥。

让网站"响应式"，意味着元素会根据设备屏幕尺寸（通常是视口宽度）通过 CSS 媒体查询调整自身大小或其它功能，例如小屏设备上字号更小：

@media (min-width: 601px) { .my-class { font-size: 24px; } } @media (max-width: 600px) { .my-class { font-size: 12px; } }

移动优先策略同样是响应式的，但主张默认先写全移动端样式，再针对更大设备追加覆盖规则：

.my-class { font-size: 12px; } @media (min-width: 600px) { .my-class { font-size: 24px; } }

移动优先的两大优点：

• 移动端性能更好：移动端实际生效的样式无需逐一经过媒体查询条件校验；
• 代码更整洁：倒逼你以"基础规则 + 渐进增强"的方式组织响应式样式。

响应式与自适应（Adaptive）设计的分野

两者都致力于跨设备优化用户体验，会针对不同视口尺寸、分辨率、使用场景、交互方式做适配，但理念不同：

• 响应式设计基于"灵活性"原则——一个流动的网站，在任何设备上都好看。它用媒体查询、弹性栅格、响应式图片，让体验像"一个球可大可小地穿过不同尺寸的圈"。
• 自适应设计更像"现代意义上的渐进增强"——不是一套弹性设计，而是先检测设备与特性，再基于一组预定义视口尺寸交付预设布局。就像"为不同尺寸的圈准备多只对应大小的球"。

两者各有权衡：响应式的难点在于用"一套响应式布局"应对所有场景（断点该用业界标准值还是贴合自身布局？布局变了怎么办？）；自适应通常依赖 UA 嗅探或 DPI 检测等可靠性存疑的手段。相关答案还沉淀在 quiz 卡片 how-is-responsive-design-different-from-adaptive-design/zh-CN.mdx。

Retina 高清屏图形：你用过哪些技术？

"Retina"是营销术语，泛指像素比大于 1 的高分辨率屏幕。关键在于：高像素比屏幕会"模拟较低分辨率"来以同样物理尺寸显示元素，而浏览器默认按设备分辨率渲染 DOM 元素——唯独图片例外。tl 译本给出的三种经典做法：

1. 偏好使用两倍于显示的更高分辨率图片；
2. 用媒体查询@media only screen and (min-device-pixel-ratio: 2) { ... }切换background-image；
3. 图标类资源尽可能用 SVG 与 icon 字体，任何分辨率下都渲染清晰；
4. 或用 JavaScript 检测window.devicePixelRatio，再替换<img>的src为高分辨率版本。

英文主文档补充了更现代的 HTML5srcset/sizes响应式图片方案，把分辨率决策交给浏览器：

<div responsive-background-image> <img src="/images/test-1600.jpg" sizes=" (min-width: 768px) 50vw, (min-width: 1024px) 66vw, 100vw" srcset=" /images/test-400.jpg 400w, /images/test-800.jpg 800w, /images/test-1200.jpg 1200w " /> </div>

不支持srcset的浏览器（如 IE11）会忽略它而回退到src；若必须支持 IE11 又要享受性能收益，可用 Picturefill 之类的 JS polyfill。

五、高效 CSS 与工程化

编写高效 CSS 的几个"坑"

• 浏览器从最右的关键选择器向左匹配（见上文），因此避免使用标签选择器与通配符作为关键选择器，它们会命中海量元素，徒增祖先遍历开销；
• BEM（Block Element Modifier）方法论提倡"一切皆单一类名"，层级关系直接烘焙进类名，天然让选择器高效且易覆盖；
• 留意哪些 CSS 属性会触发 reflow、repaint 与 compositing，凡是能避免的，就不要去写会改变布局（触发 reflow）的样式——动画路径上优先考虑transform/opacity（见上文translate()一节）。

CSS 雪碧图（CSS Sprites）及其实现

雪碧图把多张小图合并成一张大图，常用于图标场景。实现步骤：

1. 用雪碧图生成器把多张图打包为一张，并为其生成配套 CSS；
2. 每张子图对应一个 CSS 类，定义各自的background-image、background-position、background-size；
3. 需要某张图时，给元素加上对应类即可。

优点：

• 显著减少多图场景的 HTTP 请求次数（每张 spritesheet 只需一次请求）——不过 HTTP/2 时代多图并行加载已不再是问题；
• 提前下载那些原本用到才加载的资源（如仅在:hover伪类时出现的图片），避免交互瞬间的图片闪烁。

CSS 预处理器：优缺点与实战体会

优点：

• 让 CSS 更易维护；
• 嵌套选择器书写直观；
• 变量支撑统一主题，主题文件可跨项目共享；
• Mixin 批量生成重复 CSS；
• Sass 的循环、列表、Map 让配置更简练；
• 支持把代码拆到多个文件——原生 CSS 也能拆分，但每拆一个文件就多一次 HTTP 请求（无打包器时）。

缺点：

• 需要预处理工具链，重新编译可能较慢；
• 让你写的是"当前尚不可直接使用的 CSS"——例如借助postcss-loader与 webpack，其实可以写"面向未来兼容"的 CSS（用原生 CSS 变量替代 Sass 变量），意味着你在学习 Sass 语法期间，有些技能待到它被标准化后就可能过时。

个人使用体会（文档原话观点）：

• 喜欢：基本就是上述优点；Less 由 JavaScript 实现，与 Node 配合良好。
• 不喜欢：通过node-sass（C++ 编写的 LibSass 的绑定）使用 Sass 时，切换 Node 版本经常需要重新编译；Less 的变量名以@为前缀，容易与原生 CSS 的@media、@import、@font-face等规则混淆。

用过哪些 CSS 框架？会如何改进它们？

文档基于真实使用体验给出了三类批评，面试时引用这类"亲历式评价"比空泛回答更有说服力：

• Bootstrap：发布周期太慢——Bootstrap 4 在 alpha 阶段停留了将近两年；应补充广泛使用的 spinner（加载中）按钮组件。
• Semantic UI：源码结构让主题定制极难理解；非传统的主题系统难以定制；vendor 库内硬编码了配置路径；变量覆盖机制不如 Bootstrap 设计得好。
• Bulma：需要大量非语义、冗余的类与标记；不向后兼容，升级版本会以微妙的方式破坏应用。

用@font-face还原使用非标准字体的设计稿

使用@font-face声明字体，并为不同的font-weight分别指定font-family字重对应关系即可。

六、无障碍、兼容性与图形细节

视觉隐藏内容（但屏幕阅读器仍可访问）的方法

这些方法属于无障碍（a11y）范畴，按需选择：

• width: 0; height: 0：让元素完全不留空间，从而不可见；
• position: absolute; left: -99999px：把元素移出屏幕之外；
• text-indent: -9999px：只对block元素内的文本生效（经典但著名且有性能等副作用，可考虑改用text-indent: 100%）；
• 元数据：如 Schema.org、RDF、JSON-LD；
• WAI-ARIA：W3C 制定的增强网页可访问性的技术规范。

文档作者的倾向：即便 WAI-ARIA 是理想方案，仍会选absolute定位外移法——它坑最少、对大多数元素有效、实现最简单。

如何修复特定浏览器的样式问题

• 定位问题与肇事浏览器后，用仅在特定浏览器加载的独立样式表（需要服务端渲染配合）；
• 使用 Bootstrap 这类已替你处理常见样式差异的库；
• 用autoprefixer自动为代码补全厂商前缀；
• 使用 Reset CSS 或 Normalize.css；
• 若在用 PostCSS（或同类转译工具），可启用插件放心书写现代 CSS 语法（乃至 W3C 提案语法），插件会把它们转译成目标浏览器安全的代码。

如何为特性受限的浏览器提供服务？

• 优雅降级（Graceful degradation）：面向现代浏览器开发，同时保证在旧浏览器中功能不失效；
• 渐进增强（Progressive enhancement）：先面向基础体验构建，浏览器支持时再叠加功能增强；
• 用 caniuse.com 核对特性支持表；
• 用 Autoprefixer 自动插入厂商前缀；
• 用 Modernizr 做特性检测；
• 使用 CSS 特性查询@supports。

伪元素（Pseudo-elements）：是什么、用来做什么

CSS 伪元素是附加到选择器上的关键字，让你能对选中元素的某一部分做精细样式化。可用于装饰（:first-line、:first-letter），或在不动标记（markup）的前提下配合content: ...向页面注入元素（:before、:after）：

• :first-line、:first-letter用于文本装饰；
• .clearfixhack 正是用::after注入一个带clear: both的零空间元素（见前文代码）；
• 气泡提示框（tooltip）的三角形箭头常用:before/:after绘制，这鼓励关注点分离——三角形属于样式而非 DOM，并且不用额外 HTML 元素纯靠 CSS 很难画出三角形。

SVG 样式化：fill、stroke与表现属性

有趣的事实：tl 译本在这个问题上仍停留在早期版本的回答"不好意思，不了解"，但英文主文档已补全（packages/quiz/questions/are-you-familiar-with-styling-svg/zh-CN.mdx目录即为同题的刷题卡片）。给 SVG 上色可借助内联 CSS、内嵌 CSS 片段或外部 CSS 文件。基本着色只需设置两个属性：fill（图形内部颜色）与stroke（图形描边颜色），颜色写法与 HTML 一致（颜色名、RGB、Hex、RGBA 等）：

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8" />

注意：fill="purple"属于表现属性（presentational attribute），与style="fill: purple"这样的内联样式不同，前者可被样式表中的 CSS 覆盖——例如svg { fill: blue; }能盖掉上面定义的紫色填充。

如何结合仓库资源把这份问答"练到肌肉记忆"

文章所有结论均可回到仓库原文核对：

1. 背英文/对照阅读：website/contents/css-questions.md 是答案主文档；若需多语言对照，tl 译本见 website/i18n/tl/docusaurus-plugin-content-docs/current/css-questions.md；
2. 逐题刷卡片：packages/quiz/questions/下每个问题目录的zh-CN.mdx/en-US.mdx都独立成卡，比如特异性、BFC、浮动、z-index、定位这五题（见上文逐条引用的路径），配合前文提过的其他 30 余题卡片可做随机抽测；
3. 横向延伸：本仓库的packages/front-end-interview-guidebook面向完整面试流程，website/contents/还收录了 HTML、JavaScript 问答与多公司真题，可作为 CSS 之外的补充复习链路。

最后回到文档反复强调的两个贯穿性心法，面试作答与真实项目同样适用：优先低特异性、可被轻松覆盖的规则（别动辄!important）；动画与交互路径上避开 reflow，善用只触发合成的transform/opacity。把握住这两条，CSS 问题的回答就有了统一的"正确姿势"。

【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbook