
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-handbookCSS 是前端面试中考点最固定、但问法最多样的部分。本文基于 front-end-interview-handbook 仓库中的 CSS 面试问答重新整理把盒模型、Flexbox/Grid、响应式、浏览器兼容性等高频考点压缩成六个板块每个结论都配上可验证的代码或数值。读完后你可以直接产出一份覆盖大多数面试提问的 CSS 自测提纲。级联与优先级先搞清谁赢面试官问选择器本质上是问两条规则冲突时浏览器凭什么裁决。裁决依据是一个四列值a, b, c, da为是否内联样式0/1b为 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改变的是口径而非布局本身口径声明的宽/高指代盒实际外尺寸内容 100×100padding 10border 5content-box默认仅内容区130×130声明值与占位不符border-box内容 水平/垂直 padding border严格 100×100内容区收缩为 70×70两种口径下margin都不计入宽/高。border-box 的实际价值在栅格三列各写width: 33.33%且带 padding 时声明宽度与列槽宽度严格一致百分比与vw混用时不必手工做减法。全局*选择器在超大 DOM 下有轻微开销更稳的写法是给html设border-box再让*, *:before, *:after { box-sizing: inherit; }继承个别元素仍可显式切回 content-box。display决定盒类型与参与布局的方式面试常考对比口径如下取值流内行为width/heightmargin 与 paddingblock独占整行默认撑满生效四向均生效inline与文本同行流动设置被忽略仅水平向生效垂直占位由line-height决定inline-block同行流动但独立成盒生效四向均生效none元素连同所有后代移出文档树如同不存在——flex/grid容器级取值决定子项排列方式生效生效两个容易被追问的边界inline元素一旦浮动就表现得像block可设垂直 margintable、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非noneposition既非static也非relativedisplay为inline-block、flex、inline-flex、table-cell、table-caption、grid、inline-gridoverflow非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 普及前约 2014float 栅格因支持面最广而最可靠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 响应式图片——srcsetsizes让浏览器自选分辨率旧浏览器如 IE11会忽略srcset回退到srcimg 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 x10 y10 width100 height100 fillpurple fill-opacity0.5 strokeblue stroke-opacity0.8 /值得展开的细节fillpurple属于表现属性与stylefill: 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 源码结构让主题定制难以理解、变量覆盖设计不如 BootstrapBulma 需要大量非语义类且升级会悄悄破坏应用。给出具体、可操作的批评比泛泛吐槽更有分量。 渲染性能位移动画为什么用 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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考