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-handbookCSS 面试是前端岗位考察中占比极高的一环本指南以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, da是否使用了内联样式。若属性声明写在元素上的style内联样式里a为 1否则为 0bID 选择器的数量c类选择器、属性选择器与伪类选择器的数量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英文主文档给出了完整语义表display值含义none不显示该元素且不再影响文档布局子元素一并隐藏如同元素不存在于文档树中block独占块方向上的整行通常为水平方向inline可与相邻内容并排排列inline-block类似inline但允许设置width/height等块级特性table表现如同table元素table-row表现如同tr元素table-cell表现如同td元素list-item表现如同li元素可设置list-style-type与list-style-positioninline、inline-block与block三者的区别tl 译本用一张对照表给出了面试中最标准的回答并注明把block也拉进来做对比效果更好维度blockinline-blockinline尺寸填满父容器宽度取决于内容取决于内容定位另起一行旁边不允许其他 HTML 元素除非加float与其它内容同行流动允许旁边有其他元素与其它内容同行流动允许旁边有其他元素可否指定width/height可以可以不可以设置了也会被忽略可否用vertical-align对齐不可以可以可以margin / padding四周均生效四周均生效只有水平方向生效垂直方向的 margin 即便设置也不影响布局占据的垂直空间取决于line-height尽管border、padding看起来围绕内容渲染float——表现得像block可设置垂直 margin 与 padding三、布局与定位float、clearfix、BFC、position、z-indexfloat浮动及其工作原理浮动是 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 styleclear:both;/divClearfix 法使用上文.clearfix类overflow: auto/overflow: hidden法父元素建立新的 BFC 并扩展包住浮动子元素。文档给出的工程经验在大型项目里应把.clearfix写成可复用的工具类按需到处使用overflow: hidden在子元素比父元素更高时可能把子元素裁切掉并非理想选择。块格式化上下文BFC是什么、如何形成块格式化上下文Block Formatting Context是网页视觉 CSS 渲染的一部分块级盒子在其中进行排布。浮动、绝对定位元素、inline-block、table-cell、table-caption以及overflow值非visible的元素除非该值已传播到视口都会建立新的块格式化上下文。了解 BFC 很重要如果不创建它包含框将无法包住浮动子元素表现为整个父盒子以怪异的方式塌陷——这与外边距折叠相似但更隐蔽。一个 HTML 盒子只要满足下列任一条件即成为 BFCfloat的值不是noneposition的值既不是static也不是relativedisplay的值为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 隔离布局、杜绝边距泄漏的原理。positionstatic、relative、absolute、fixed、sticky定位元素指计算后position为relative、absolute、fixed或sticky之一的元素。各取值的语义对应 quiz 卡片 whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.mdxstatic默认定位元素按常规流入页面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。文档作者补充道截至写作时2020flex已是构建栅格系统的推荐方式并拥有良好浏览器支持更前沿的选择是 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类型共有四类含screenall适用于所有媒体类型设备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 译本给出的三种经典做法偏好使用两倍于显示的更高分辨率图片用媒体查询media only screen and (min-device-pixel-ratio: 2) { ... }切换background-image图标类资源尽可能用 SVG 与 icon 字体任何分辨率下都渲染清晰或用 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 的几个坑浏览器从最右的关键选择器向左匹配见上文因此避免使用标签选择器与通配符作为关键选择器它们会命中海量元素徒增祖先遍历开销BEMBlock Element Modifier方法论提倡一切皆单一类名层级关系直接烘焙进类名天然让选择器高效且易覆盖留意哪些 CSS 属性会触发 reflow、repaint 与 compositing凡是能避免的就不要去写会改变布局触发 reflow的样式——动画路径上优先考虑transform/opacity见上文translate()一节。CSS 雪碧图CSS Sprites及其实现雪碧图把多张小图合并成一张大图常用于图标场景。实现步骤用雪碧图生成器把多张图打包为一张并为其生成配套 CSS每张子图对应一个 CSS 类定义各自的background-image、background-position、background-size需要某张图时给元素加上对应类即可。优点显著减少多图场景的 HTTP 请求次数每张 spritesheet 只需一次请求——不过 HTTP/2 时代多图并行加载已不再是问题提前下载那些原本用到才加载的资源如仅在:hover伪类时出现的图片避免交互瞬间的图片闪烁。CSS 预处理器优缺点与实战体会优点让 CSS 更易维护嵌套选择器书写直观变量支撑统一主题主题文件可跨项目共享Mixin 批量生成重复 CSSSass 的循环、列表、Map 让配置更简练支持把代码拆到多个文件——原生 CSS 也能拆分但每拆一个文件就多一次 HTTP 请求无打包器时。缺点需要预处理工具链重新编译可能较慢让你写的是当前尚不可直接使用的 CSS——例如借助postcss-loader与 webpack其实可以写面向未来兼容的 CSS用原生 CSS 变量替代 Sass 变量意味着你在学习 Sass 语法期间有些技能待到它被标准化后就可能过时。个人使用体会文档原话观点喜欢基本就是上述优点Less 由 JavaScript 实现与 Node 配合良好。不喜欢通过node-sassC 编写的 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-LDWAI-ARIAW3C 制定的增强网页可访问性的技术规范。文档作者的倾向即便 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 x10 y10 width100 height100 strokeblue fillpurple fill-opacity0.5 stroke-opacity0.8 /注意fillpurple属于表现属性presentational attribute与stylefill: purple这样的内联样式不同前者可被样式表中的 CSS 覆盖——例如svg { fill: blue; }能盖掉上面定义的紫色填充。如何结合仓库资源把这份问答练到肌肉记忆文章所有结论均可回到仓库原文核对背英文/对照阅读website/contents/css-questions.md 是答案主文档若需多语言对照tl 译本见 website/i18n/tl/docusaurus-plugin-content-docs/current/css-questions.md逐题刷卡片packages/quiz/questions/下每个问题目录的zh-CN.mdx/en-US.mdx都独立成卡比如特异性、BFC、浮动、z-index、定位这五题见上文逐条引用的路径配合前文提过的其他 30 余题卡片可做随机抽测横向延伸本仓库的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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考