企业官网建设流程全解析

front-end-interview-handbook 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

CSS 是前端面试中考点最固定、但问法最多样的部分。本文基于 front-end-interview-handbook 仓库中的 CSS 面试问答重新整理，把盒模型、Flexbox/Grid、响应式、浏览器兼容性等高频考点压缩成六个板块，每个结论都配上可验证的代码或数值。读完后你可以直接产出一份覆盖大多数面试提问的 CSS 自测提纲。

级联与优先级：先搞清"谁赢"

面试官问选择器，本质上是问"两条规则冲突时浏览器凭什么裁决"。裁决依据是一个四列值a, b, c, d：a为是否内联样式（0/1），b为 ID 选择器个数，c为类、属性、伪类选择器个数，d为标签与伪元素选择器个数。

关键认知：优先级不是一个分数，而是逐列比较的矩阵。从最左列开始比，分出高下立即停止。所以一个 ID 选择器（0,1,0,0）永远压过十个类加十个标签（0,0,10,10）。两列完全相等时，后写的规则生效——无论它写在哪个样式表里，位置靠后即"离元素更近"。

完整的级联顺序里，优先级其实只占一环：!important声明 > 内联样式 > 选择器优先级 > 源码顺序。组件库作者应刻意压低规则优先级，让使用方能用简单的类选择器覆盖默认样式，而不是被迫构造深层嵌套或!important。这一点在 quiz 题库 的单题条目 选择器优先级详解 中放到级联语境里展开，值得对照精读。

与之配套的是匹配机制：浏览器从选择器最右端（关键选择器）向左匹配。p span会先筛出所有<span>，再沿父链向上寻找<p>，找到即停。链条越短判定越快，因此不要让标签选择器或*充当关键选择器——它们会命中海量元素，逼浏览器做大量无谓的父链遍历。BEM 的"每元素只挂一个类、层级写进类名"的做法，恰好同时解决了效率与可覆盖性两个问题。

伪元素是另一类高频考点，它不改 HTML 就能给元素加"局部"：:first-line、:first-letter负责装饰文本；::before/::after配合content在元素首尾注入内容，清除浮动的 clearfix、tooltip 的小三角箭头都是典型用法——把三角形当样式而非 DOM，是关注点分离的体现。写法上用双冒号（规范推荐），单冒号旧写法浏览器仍兼容。

盒模型口径与 display 取值速查

盒模型规定文档树中每个元素生成矩形盒：内容区（content）外加可选的padding、border、margin三层。默认口径下，声明的width/height不含 padding 与 border；未设height时块级盒高 = 内容高 + padding（有浮动时例外），未设width时非浮动块级盒撑满父容器宽度减去 padding。

box-sizing: border-box改变的是口径而非布局本身：

两种口径下margin都不计入宽/高。border-box 的实际价值在栅格：三列各写width: 33.33%且带 padding 时，声明宽度与列槽宽度严格一致，百分比与vw混用时不必手工做减法。全局*选择器在超大 DOM 下有轻微开销，更稳的写法是给html设border-box，再让*, *:before, *:after { box-sizing: inherit; }继承，个别元素仍可显式切回 content-box。

display决定盒类型与参与布局的方式，面试常考对比口径如下：

两个容易被追问的边界：inline元素一旦浮动就表现得像block（可设垂直 margin）；table、table-row、table-cell、list-item等取值分别模拟对应表格/列表元素的行为。

布局体系：float 清除、BFC 与 Flexbox/Grid 分工

浮动元素仍是文档流的一部分，文字会环绕它排布，这点与position: absolute（完全脱离文档流）本质不同。经典副作用是父容器只含浮动子元素时高度塌缩为 0，清除方案有三个入口：

/* 入口一：伪元素 clearfix，只加类不改结构 */ .clearfix::after { content: ' '; visibility: hidden; display: block; height: 0; clear: both; }

入口二是闭合前加空的clear: both元素（多一个无意义标签）；入口三是给父元素overflow: auto或overflow: hidden，使其建立 BFC 后自动扩张包住浮动子元素。仓库原问答的实践经验：把 clearfix 封装成工具类复用，而overflow: hidden在子元素高于父元素时会裁切内容，不够理想。

BFC（块格式化上下文）的成立条件是满足其一：float非none；position既非static也非relative；display为inline-block、flex、inline-flex、table-cell、table-caption、grid、inline-grid；overflow非visible。它的两大实用行为：内部相邻块级盒的垂直 margin 会合并，而 BFC 本身能挡住与外部元素的边距合并，并可靠包住浮动子元素——这就是"含浮动容器防塌缩"的通用手段。

定位取值上，static是默认（top/left/z-index全部失效）；relative相对自身偏移且原位留白；absolute脱离文档流、相对最近定位祖先（margin 不与任何 margin 合并）；fixed脱离文档流、相对视口且不随滚动移动——注意它会创建层叠上下文，且若某祖先transform非none，包含块会从视口变成该祖先；sticky是 relative 与 fixed 的混合体，越过阈值前按相对定位、越过之后按固定定位，作用于table元素时等效relative。

z-index只对非static元素生效。未设置时按 DOM 出现顺序堆叠，非静态定位元素（含后代）总是盖在静态元素之上。层叠上下文是"装图层"的容器：内部z-index相对该父级计算，外部兄弟无法插进内部图层之间——B 盖住 A 后，A 的子元素 C 无论z-index多大都压不过 B。opacity < 1、filter ≠ none、transform ≠ none都会触发新层叠上下文，这正是"z-index 明明很大却失效"类疑难杂症的常见根源。完整解释可对照 z-index 单题中文版。

栅格系统的演进脉络本身就是一道开放题的答案框架：Flex 普及前（约 2014），float 栅格因支持面最广而最可靠，Bootstrap 也直到 4 版才从 float 切到 flex；如今一维场景 flex 是默认推荐，二维行列同时控制交给 Grid。Flexbox 解决过垂直居中、吸底页脚等经典问题；仓库原答的踩坑实录也值得引用——flex-grow在旧版 Safari 遇到兼容问题，最终退回inline-block+ 百分比宽度计算。

响应式与媒体查询：两种策略的取舍

响应式与移动优先并不互斥：前者指元素随视口宽度通过媒体查询调整尺寸或功能，后者指默认样式全部面向移动端书写，其他设备只做追加。

/* 移动优先：基础层给移动端，断点只做增强 */ .my-class { font-size: 12px; } @media (min-width: 600px) { .my-class { font-size: 24px; } }

移动优先的两个实际收益：作用于移动端的规则无需逐一通过媒体查询校验，性能更好；"先基础后增强"的书写顺序强制代码保持干净。仓库原问答举的具体案例是：超过某断点时把堆叠式胶囊导航切换为固定底部的标签导航——同一组件在两端形态不同，这类实例在面试里比抽象描述更有说服力。

响应式设计与自适应设计的分野在实现哲学：前者奉行灵活，用一份流式站点穿过所有设备（难点是断点如何选取）；后者先检测设备与特征，再从预设的视口档位中挑选布局交付（难点是 UA 嗅探、DPI 检测等手段本身未必可靠）。

@media的媒体类型共四种：all、print、speech、screen。print常用于打印样式修正：

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

现代写法还应熟悉(min-width: ...)、(prefers-color-scheme: dark)等媒体特性查询。

兼容与功能受限环境：一套交付策略栈

面对旧浏览器，两条路线各有立场：优雅降级先为现代浏览器构建、同时保证旧浏览器仍基本可用；渐进增强先交付基础体验，浏览器支持某特性时才叠加功能。工具链上：用 caniuse 核对特性支持面，autoprefixer自动补厂商前缀，Modernizr 做特性检测（而非靠 UA 推断），CSS 侧直接用@supports按特性分支书写。

浏览器特有样式问题的排查阶梯：定位问题与肇事浏览器后，用仅在該浏览器加载的独立样式表修正（依赖服务端渲染判断 UA）；或借助 Bootstrap 这类已内置兼容处理的库；PostCSS 等转译链还能让你直接书写现代语法乃至 W3C 提案级语法，由插件转成目标浏览器可用的代码。

Reset 与 Normalize 的区别在于保留程度：Reset 剥光一切默认样式（margin/padding/font-size 一律归零，排版元素要全部重声明），适合设计高度定制、不需要任何默认值的站点；Normalize 保留有用的默认值并修复浏览器间差异。Reset vs Normalize 这一题的展开见 quiz 题库 中 resetting-and-normalizing 单题条目。

资源侧的兼容性要点：

• Retina 图形：像素比大于 1 的屏幕上，浏览器默认按设备分辨率渲染 DOM 元素，唯独图片需要专门处理。首选 HTML5 响应式图片——srcset+sizes让浏览器自选分辨率，旧浏览器（如 IE11）会忽略srcset回退到src：

<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" />

图标类资源改用 SVG 或图标字体，任意分辨率都锐利；也可用 JS 读window.devicePixelRatio替换src作为兜底。

• SVG 着色：内联 CSS、内嵌<style>或外部样式表均可，基础着色靠fill（填充）与stroke（描边），颜色语法与 HTML 一致。

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

值得展开的细节：fill="purple"属于表现属性，与style="fill: purple"不同，它可以被样式表覆盖——写svg { fill: blue; }就会盖掉上面的紫色。这个点能体现你对 SVG 与 CSS 级联关系的理解。

• 非标准字体：@font-face引入字体，并为不同font-weight档位分别映射字体文件，避免用同一字体粗暴"加粗模拟"。
• 视觉隐藏（仅屏幕阅读器可见）：width: 0; height: 0完全不占空间；position: absolute; left: -99999px移出可视区（原答实践偏好此法——坑最少、适用面最广）；text-indent: -9999px仅对块级元素内文本有效且有性能副作用，可换text-indent: 100%；此外还有 JSON-LD 等结构化数据与 WAI-ARIA 路线。

/* 仅屏幕阅读器可见的两种常用写法 */ .visually-hidden { position: absolute; left: -99999px; }

• 预处理器：优点是嵌套、变量主题（可跨项目共享）、Mixin、循环/映射等配置能力、代码按文件拆分；缺点是引入编译环节、重编译耗时，且写出的不是当下可用的标准 CSS——PostCSS + webpack 工具链下可以直接书写 CSS 变量这类标准特性，学习投入能沉淀为标准能力。Less 的@前缀变量容易与@media、@import等 at-rule 混淆，是仓库原答记录的真实踩坑。
• 框架改进建议（开放题范式）：Bootstrap 发布周期慢、缺 spinner 这类高频组件；Semantic UI 源码结构让主题定制难以理解、变量覆盖设计不如 Bootstrap；Bulma 需要大量非语义类且升级会悄悄破坏应用。给出具体、可操作的批评比泛泛吐槽更有分量。

🎯 渲染性能：位移动画为什么用 transform

⚠️ 面试高频追问：改transform和改left/top，浏览器内部发生了什么？

结论先行：修改transform或opacity不触发 reflow（重排）与 repaint（重绘），只触发 compositing（合成）；而修改绝对定位的left/top会触发 reflow，并连带重绘与合成。机制上transform让浏览器为元素创建 GPU 层走合成器，改定位属性走 CPU 计算，所以translate()绘制时间更短、动画更平滑。

行为差异也要说清：用translate()时元素仍占据原来的空间（类似position: relative），绝对定位则完全脱离文档流。选择逻辑因此很直接——做位移动画优先transform；只有需要脱离文档流或相对定位祖先定位时才选绝对定位。

这条结论还支撑"编写高效 CSS"的完整答案：记住从右向左匹配并缩短选择器链、用 BEM 约束选择器、分清哪些属性触发 reflow/repaint/compositing，能少写改变布局的样式就少写。

收尾：把考点变成自测清单

仓库的 css-questions 主文档 与 中文版文档 保持同一套问题骨架，前者含全部问答与 References，适合通读；packages/quiz/questions 下每个条目（均含 en-US/zh-CN/pt-BR 多语言 .mdx 与 metadata.json）是单题的深入版，适合按主题逐个自测。建议先对照本文六个板块过一遍，再挑 specificity、BFC、z-index、translate 四个最容易追问的点，用单题条目做模拟作答。

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