2026 年 CSS 面试重点有哪些？
- 重点不只是盒模型、居中和 BFC，还包括现代布局、容器查询、级联层、
:has()、CSS 嵌套、@scope、动画性能和工程治理。 - 面试更看重你能不能解释“为什么这样写更稳”，以及如何处理复杂项目里的样式冲突、性能和兼容性。
CSS 的核心能力是什么？
- CSS 负责描述页面表现，包括布局、排版、颜色、动画、响应式和视觉状态。
- 现代 CSS 已经从“写样式”扩展到组件作用域、设计系统、主题变量和交互状态管理。
CSS 级联由哪些因素决定？
- 主要由来源、重要性、级联层、选择器优先级、作用域距离和源码顺序共同决定。
- 不要只背“id 大于 class”，现代 CSS 还要理解
@layer和@scope。
CSS 优先级怎么计算？
- 通常按内联样式、ID、类/属性/伪类、标签/伪元素来比较。
- 同级优先级相同时，后声明的规则覆盖先声明的规则。
!important 为什么要少用？
- 它会提高声明重要性，让后续覆盖变困难。
- 大型项目中滥用
!important会让样式系统失控，应优先用层级、作用域和结构解决。
@layer 是什么？
@layer是 CSS 级联层，用于显式管理不同样式来源的优先级。- 它适合组织 reset、基础样式、组件样式、工具类和业务覆盖层。
@layer 和选择器优先级是什么关系？
- 在同一来源下，层级顺序会先于选择器优先级参与比较。
- 低层里的高优先级选择器，也可能输给高层里的低优先级选择器。
@layer 适合解决什么问题？
- 适合解决第三方样式、组件库样式、工具类样式和业务覆盖之间的冲突。
- 它让团队不用靠不断加长选择器或堆
!important来抢优先级。
@scope 是什么？
@scope可以把选择器限制在指定 DOM 子树内生效。- 它能减少选择器和页面结构的耦合，也能降低局部样式污染。
@scope 和 CSS Modules 有什么区别？
@scope是浏览器原生 CSS 作用域能力，围绕 DOM 范围限制选择器。- CSS Modules 是构建期方案，通过类名哈希或映射实现局部样式。
@scope 适合什么场景？
- 适合局部区域样式、内容区样式、主题片段、第三方 HTML 包裹区域。
- 如果需要组件级强隔离，仍可能配合 CSS Modules、Shadow DOM 或框架 scoped CSS。
CSS 嵌套是什么？
- CSS Nesting 允许在一个选择器内部写子选择器，让相关规则放在一起。
- 它能提升可读性，但嵌套过深会增加维护成本。
CSS 嵌套中的 & 表示什么？
&表示外层选择器本身。- 写伪类、修饰类、相邻兄弟、组合选择器时经常需要显式使用
&。
CSS 原生嵌套和 Sass 嵌套一样吗？
- 不完全一样，原生 CSS 嵌套有自己的解析规则。
- 迁移 Sass 时要特别检查
&、类型选择器拼接和嵌套层级。
CSS 嵌套为什么不建议太深？
- 嵌套太深会让选择器变长、优先级变高、复用变难。
- 通常两到三层比较可控，更深时应考虑拆组件或调整类名结构。
:has() 是什么？
:has()是关系伪类，可以根据元素内部或相邻关系反向选择父级或祖先。- 它常被称为“父选择器”，但能力不只限于选择父元素。
:has() 常见使用场景有哪些？
- 表单有错误时高亮外层容器、卡片包含图片时改变布局、导航项包含当前链接时加样式。
- 也可用于纯 CSS 状态联动，但复杂交互仍应交给 JS。
:has() 会不会影响性能？
- 现代浏览器已做优化，但复杂、宽泛的
:has()仍可能增加样式计算成本。 - 应尽量限定范围，比如
.form-field:has(input:invalid)比body:has(...)更可控。
:is() 和 :where() 有什么区别？
:is()的优先级取参数列表中最高的选择器。:where()的优先级永远为 0，适合写 reset、基础样式和可覆盖规则。
:not() 在现代 CSS 中有什么变化？
- 现代
:not()可以接受复杂选择器列表。 - 它的优先级由参数中最高优先级选择器决定。
:focus-visible 和 :focus 有什么区别？
:focus表示元素获得焦点。:focus-visible只在浏览器判断需要可见焦点提示时匹配，更适合键盘可访问性。
:user-valid 和 :user-invalid 有什么用？
- 它们用于表单校验状态，但更关注用户交互后的结果。
- 相比一开始就用
:invalid，可以减少页面初始状态全红的问题。
选择器写得越短越好吗？
- 不一定，选择器要在可读、可维护、可覆盖之间平衡。
- 现代项目更推荐语义化类名、低优先级选择器和清晰作用域。
BFC 是什么？
- BFC 是块级格式化上下文，是一块独立布局区域。
- 它能影响浮动、外边距折叠和高度计算。
如何触发 BFC？
- 常见方式有
overflow: hidden/auto、display: flow-root、浮动、绝对定位、inline-block、flex/grid item 等。 - 现代写法优先考虑
display: flow-root，语义更明确。
display: flow-root 有什么用？
- 它可以创建新的 BFC。
- 常用于清除浮动、阻止外边距折叠，比使用 overflow 副作用更少。
标准盒模型和 IE 盒模型有什么区别？
- 标准盒模型中
width只包含 content。 box-sizing: border-box下，width包含 content、padding 和 border。
为什么项目里常用 box-sizing: border-box？
- 它让元素总宽高更容易预测。
- 在响应式布局和组件封装中更不容易因为 padding 撑破容器。
margin 折叠是什么？
- 垂直方向相邻块级元素的 margin 可能合并成一个 margin。
- 常见于父子元素、相邻兄弟和空块元素。
怎么避免 margin 折叠？
- 可以创建 BFC、加 padding/border、使用 flex/grid 布局或改用 gap。
- 现代布局中用
gap管理间距通常更稳定。
CSS 中 px、em、rem 有什么区别？
- px 是 CSS 像素，em 相对当前元素字体大小，rem 相对根元素字体大小。
- rem 适合全局缩放，em 适合组件内部随字体比例变化。
vw、vh、svh、lvh、dvh 有什么区别？
vh是传统视口高度单位，在移动端会受浏览器工具栏影响。svh表示小视口，lvh表示大视口，dvh表示动态视口，更适合移动端适配。
为什么移动端 100vh 可能有问题？
- 浏览器地址栏显示和收起会改变可视区域。
- 现代项目可以根据场景使用
100dvh、100svh或 JS 兜底。
CSS 逻辑属性是什么？
- 逻辑属性基于书写方向描述布局，比如
margin-inline、padding-block、inset-inline-start。 - 它比 left/right/top/bottom 更适合国际化和 RTL 布局。
逻辑属性适合什么场景？
- 适合多语言、横竖排、RTL/LTR 切换和设计系统。
- 它能减少不同书写方向下重复写样式。
Flex 布局适合什么场景？
- Flex 适合一维布局，也就是主要处理一行或一列的排列。
- 常用于导航、工具栏、按钮组、表单行和垂直居中。
Grid 布局适合什么场景？
- Grid 适合二维布局，可以同时控制行和列。
- 常用于页面骨架、卡片网格、复杂面板和响应式区域布局。
Flex 和 Grid 怎么选择？
- 一维排列优先 Flex，二维布局优先 Grid。
- 实际项目中二者经常组合使用，不需要二选一。
flex: 1 表示什么？
- 通常等价于
flex: 1 1 0%。 - 元素可放大、可缩小，并以 0 作为基础尺寸参与剩余空间分配。
flex-basis 和 width 有什么区别？
- flex-basis 是 flex 主轴方向上的初始尺寸。
- 在 flex 布局中，空间分配通常优先看 flex-basis，而不是简单看 width。
flex-shrink 为什么会导致文字被挤压？
- 默认
flex-shrink: 1，空间不足时元素会缩小。 - 对不希望压缩的元素可设置
flex-shrink: 0，同时给文本区域处理省略。
min-width: 0 在 flex 中有什么用？
- flex item 默认最小宽度可能由内容撑开。
- 设置
min-width: 0可以允许内容区域真正收缩，常用于文本省略。
gap 和 margin 做间距有什么区别？
- gap 是容器控制子项之间的间距，不影响外侧边缘。
- margin 是元素自身外边距，容易出现首尾额外间距和折叠问题。
Grid 的 fr 单位是什么？
fr表示可用空间的一份。- 它适合构建自适应列宽，比如
grid-template-columns: 1fr 2fr。
repeat、auto-fill、auto-fit 有什么区别？
repeat()用于重复轨道定义。auto-fill会保留可容纳的空轨道，auto-fit会折叠空轨道让已有项撑满。
minmax() 常用来做什么？
minmax()用于限制 Grid 轨道的最小和最大尺寸。- 常见写法是
repeat(auto-fit, minmax(240px, 1fr))实现响应式卡片。
subgrid 是什么？
- subgrid 允许子网格沿用父网格的行或列轨道。
- 它适合卡片列表、表单布局、复杂排版中跨组件对齐。
subgrid 解决了什么问题？
- 它让嵌套元素也能和外层网格线对齐。
- 过去这类对齐往往需要重复定义 grid 或依赖 JS 计算。
容器查询是什么？
- 容器查询允许组件根据父容器尺寸变化，而不是只根据视口变化。
- 它更适合组件化布局，因为同一个组件可在不同容器中自适应。
容器查询和媒体查询有什么区别？
- 媒体查询看视口或设备条件。
- 容器查询看某个容器的尺寸、样式或滚动状态，更贴近组件实际可用空间。
container-type 有什么用？
- 它声明元素成为可查询容器。
- 常见值有
inline-size和size，多数响应式组件用inline-size。
container-name 有什么用？
- 它给容器命名，方便
@container 名称 (...)精确匹配。 - 大型页面中命名容器能避免查询到错误的上级容器。
容器查询单位有哪些？
- 常见有
cqw、cqh、cqi、cqb、cqmin、cqmax。 - 它们相对查询容器尺寸，适合组件内部字号和间距自适应。
样式查询是什么？
- 样式查询是容器查询的一类，可根据容器的样式条件应用规则。
- 目前最常见的实践方向是结合 CSS 自定义属性做组件状态和主题变体。
CSS 自定义属性是什么？
- 也叫 CSS 变量，通过
--name定义，用var(--name)使用。 - 它运行在浏览器级联体系里，天然支持继承、覆盖和主题切换。
CSS 变量和 Sass 变量有什么区别？
- Sass 变量是构建期变量，编译后不存在。
- CSS 变量是运行时变量，可以被 JS 修改，也可以随级联和媒体查询动态变化。
CSS 变量适合做什么？
- 适合主题色、间距、圆角、阴影、组件状态和设计 token。
- 大型项目中它是设计系统和多主题能力的重要基础。
var() 的 fallback 是什么？
var(--color, red)中的 red 是 fallback。- 当变量不存在或无效时，浏览器会使用 fallback。
@property 是什么？
@property可以注册 CSS 自定义属性的语法、继承行为和初始值。- 注册后变量可以更稳定地参与动画和类型校验。
@property 为什么能让 CSS 变量动画更自然？
- 未注册的自定义属性通常按离散值变化。
- 注册语法后，浏览器知道它是颜色、长度或数字，就能进行插值动画。
prefers-color-scheme 有什么用？
- 它用于检测用户系统的浅色或深色主题偏好。
- 常用于自动切换暗黑模式，并配合手动主题开关。
color-scheme 有什么用？
- 它告诉浏览器页面支持哪些配色方案。
- 表单控件、滚动条、默认背景等浏览器 UI 可以随主题适配。
prefers-reduced-motion 有什么用？
- 它用于识别用户是否希望减少动画。
- 对晕动敏感用户，应减少大幅移动、自动播放和复杂视差动画。
prefers-contrast 有什么用？
- 它用于识别用户是否偏好更高或更低对比度。
- 可访问性要求高的项目可基于它优化主题和边框。
CSS 颜色函数有哪些新趋势？
- 现代 CSS 支持更多颜色空间和函数，比如
oklch()、lab()、color-mix()。 - 它们更适合做感知均匀的主题色、渐变和暗黑模式。
oklch() 有什么优势？
oklch()更接近人眼感知，调整亮度和色度更自然。- 设计系统中用它生成色阶，通常比单纯 HSL 更稳定。
color-mix() 可以做什么？
- 它可以在 CSS 中混合两种颜色。
- 常用于 hover 色、禁用色、透明叠加和主题衍生色。
currentColor 是什么？
currentColor表示当前元素的 color 值。- 它常用于图标、边框、阴影和 SVG，使颜色跟随文本继承。
现代 CSS 如何实现暗黑模式？
- 用 CSS 变量承载设计 token，再通过类名、data 属性或媒体查询切换变量值。
- 同时配置
color-scheme，让原生控件也适配主题。
响应式设计常用策略有哪些？
- 使用流式布局、弹性单位、媒体查询、容器查询、图片响应式和合理断点。
- 组件级响应式更推荐容器查询，页面级响应式仍常用媒体查询。
移动端适配应该注意什么？
- 注意视口单位、安全区域、点击区域、字体缩放、图片清晰度和横竖屏。
- 刘海屏和底部手势区域要结合
env(safe-area-inset-*)。
env(safe-area-inset-*) 是什么？
- 它用于读取设备安全区域边距。
- 常用于 iPhone 刘海屏、底部导航、沉浸式页面的 padding 适配。
响应式图片有哪些方案？
- 使用
srcset、sizes、picture、现代图片格式和懒加载。 - CSS 侧要给图片预留尺寸，避免布局偏移。
object-fit 有什么用？
- 它控制替换元素内容如何适配容器，比如图片和视频。
- 常见值有
cover、contain、fill、none、scale-down。
aspect-ratio 有什么用？
- 它可以直接声明元素宽高比。
- 常用于卡片封面、视频容器、头像、骨架屏，能减少布局抖动。
line-clamp 如何实现多行省略？
- 常用
display: -webkit-box、-webkit-line-clamp、-webkit-box-orient: vertical。 - 新语法在演进，但实际项目仍要关注浏览器兼容性。
单行文本省略怎么写？
- 设置
overflow: hidden、white-space: nowrap、text-overflow: ellipsis。 - 在 flex 子项中经常还需要
min-width: 0。
文本换行相关属性有哪些？
- 常见有
white-space、overflow-wrap、word-break、hyphens。 - 中英文混排、长 URL、代码块和表格内容要分别处理。
position: sticky 为什么不生效？
- 常见原因是祖先元素 overflow 限制、没有设置 top/left 等偏移、容器高度不足。
- sticky 的参照和滚动容器有关，不是简单固定在视口。
fixed 和 sticky 有什么区别？
- fixed 相对视口固定，脱离普通文档流。
- sticky 在阈值前按普通布局，达到阈值后在滚动容器内粘住。
z-index 为什么有时不生效？
- z-index 只在定位元素或特定布局上下文中有效。
- 还可能被新的层叠上下文限制，子元素再高也出不去父级上下文。
什么会创建层叠上下文？
- 常见有 position + z-index、opacity 小于 1、transform、filter、isolation、contain、will-change 等。
- 排查遮挡问题时要先找层叠上下文边界。
isolation: isolate 有什么用？
- 它可以显式创建新的层叠上下文。
- 常用于组件隔离，避免内部 z-index 和外部元素互相干扰。
contain 属性有什么用？
contain告诉浏览器某个元素的布局、绘制、尺寸或样式影响被限制在内部。- 它可帮助浏览器优化渲染，也可减少复杂组件对外部布局的影响。
content-visibility 有什么用？
- 它允许浏览器跳过屏幕外内容的渲染工作。
- 长列表、长文章、复杂卡片区域可以用它改善首屏和滚动性能。
contain-intrinsic-size 有什么用？
- 它给尚未渲染的内容提供一个占位尺寸。
- 常和
content-visibility: auto配合，减少滚动时布局跳动。
will-change 应该怎么用？
- 它提示浏览器某些属性即将变化，可能提前做优化。
- 不应长期大量使用，否则会增加内存和合成层成本。
CSS 动画性能应该关注哪些属性？
- 优先动画
transform和opacity。 - 避免频繁动画 width、height、top、left、box-shadow 等容易触发布局或绘制的属性。
transition 和 animation 有什么区别？
- transition 适合状态 A 到状态 B 的过渡。
- animation 适合关键帧、多阶段、循环或更复杂的动画。
transition-behavior 是什么？
- 它允许离散属性参与过渡，比如 display、overlay 等场景。
- 常和
@starting-style、popover、dialog 入场离场动画一起使用。
@starting-style 是什么？
- 它用于定义元素第一次应用样式或从 display none 出现时的过渡起始状态。
- 没有它时，某些入场动画可能直接跳到最终状态。
display: none 为什么以前不能直接过渡？
- display 是离散属性，不像 opacity 那样有连续中间值。
- 现代 CSS 可结合
transition-behavior: allow-discrete和@starting-style改善部分场景。
View Transitions API 和 CSS 有什么关系？
- View Transitions 提供页面或状态切换时的视觉过渡能力。
- CSS 通过伪元素和动画规则控制旧视图、新视图的过渡效果。
Scroll-driven Animations 是什么？
- 它让动画进度由滚动位置驱动，而不是由时间驱动。
- 常用于阅读进度、滚动联动、视差和元素进入视口动画。
scroll-snap 有什么用？
- 它让滚动容器停靠到指定位置。
- 常用于轮播、横向卡片列表、章节滚动和移动端分页体验。
overscroll-behavior 有什么用？
- 它控制滚动到边界时是否继续传递滚动链。
- 常用于弹窗、抽屉、内嵌滚动区域，避免背景跟着滚动。
overflow-anchor 是什么？
- 它控制浏览器滚动锚定行为。
- 当上方内容动态插入导致页面跳动时，可以通过它调整或关闭锚定。
backdrop-filter 有什么用？
- 它对元素背后的区域应用模糊、亮度等滤镜。
- 常用于毛玻璃效果，但要注意性能和可读性。
filter 和 backdrop-filter 有什么区别？
filter作用于元素自身内容。backdrop-filter作用于元素背后的背景区域。
clip-path 适合做什么？
- 它可以裁剪元素形状，比如多边形、圆形、复杂遮罩。
- 适合视觉效果，但复杂裁剪可能带来绘制成本。
mask 和 clip-path 有什么区别？
- clip-path 更偏几何裁剪。
- mask 可以根据透明度或图像控制显示区域，表达能力更强。
mix-blend-mode 有什么用？
- 它控制元素与背景的颜色混合方式。
- 常用于视觉设计，但要注意层叠上下文、性能和可读性。
CSS 中 calc() 有什么用？
- 它可以在 CSS 中做长度、百分比、变量等混合计算。
- 常用于响应式布局、固定栏加流式内容、设计 token 派生。
min()、max()、clamp() 有什么区别？
min()取较小值，max()取较大值。clamp(min, preferred, max)把值限制在最小和最大之间。
clamp() 常用在哪？
- 常用于响应式字号、容器宽度、间距和图片尺寸。
- 它能减少大量媒体查询，但不要用 viewport 宽度直接无限缩放字体。
CSS 三角形怎么实现？
- 传统方式是用宽高为 0 的元素和透明边框。
- 现代项目也可用 clip-path 或 SVG，语义和可维护性更好。
水平垂直居中有哪些方式？
- Flex、Grid、绝对定位加 transform、line-height、margin auto 都可以。
- 现代布局优先用 flex 或 grid，语义简单且适配性好。
如何实现两栏布局？
- 固定侧栏加自适应主区可以用 flex、grid 或 calc。
- Grid 写法通常更清晰，比如
grid-template-columns: 240px 1fr。
如何实现三栏布局？
- 可用 Grid：
grid-template-columns: 240px 1fr 320px。 - 旧方案如圣杯布局、双飞翼布局现在更多是理解历史和布局原理。
等高列怎么实现？
- Flex 和 Grid 天然适合等高布局。
- 不建议再依赖 padding/margin hack 做复杂等高列。
Sticky Footer 怎么实现？
- 可以用 flex column，让 main 区域
flex: 1。 - 也可以用 Grid 定义
auto 1fr auto三行布局。
CSS 如何实现毛玻璃效果？
- 常用半透明背景配合
backdrop-filter: blur(...)。 - 要保证背景对比度和文本可读性，必要时加纯色兜底。
CSS 如何实现骨架屏？
- 用背景色块模拟内容区域，再用渐变动画制造加载感。
- 注意动画不要过重，并尊重
prefers-reduced-motion。
CSS 如何实现主题切换？
- 用 CSS 变量定义颜色、间距、阴影等 token。
- 通过
html[data-theme="dark"]或媒体查询覆盖变量。
CSS 如何实现响应式卡片？
- 可以用 Grid 的
repeat(auto-fit, minmax(...))。 - 卡片内部再结合容器查询处理标题、图片和按钮布局。
CSS 如何实现瀑布流？
- 传统可用 CSS columns，但顺序是按列流动。
- 新的 masonry 布局仍需关注浏览器支持，生产中常用 JS 或降级方案。
CSS 如何隐藏元素但保留可访问性？
- 可使用 visually-hidden 模式，让元素视觉隐藏但仍可被屏幕阅读器读取。
display: none和visibility: hidden通常会让辅助技术也不可见。
display: none 和 visibility: hidden 有什么区别？
display: none不占布局空间。visibility: hidden仍占布局空间，但视觉不可见。
opacity: 0 和 visibility: hidden 有什么区别？
opacity: 0元素透明但仍可点击、可聚焦，除非额外处理 pointer-events 等。visibility: hidden通常不可见且不可交互，但仍占空间。
pointer-events: none 有什么用？
- 它让元素不响应鼠标或触摸事件。
- 常用于穿透遮罩、禁用装饰层点击，但不要误伤可访问交互。
CSS 可访问性要关注什么？
- 关注颜色对比度、焦点样式、减少动画、字体可读性、点击区域和语义结构配合。
- CSS 不应去掉键盘用户所需的焦点提示。
为什么不要随便 outline: none？
- outline 是键盘用户识别焦点位置的重要提示。
- 如果去掉默认 outline，必须提供清晰的自定义
:focus-visible样式。
rem 布局和 viewport 布局怎么选？
- rem 适合跟随根字号的整体缩放。
- viewport 单位适合和视口强相关的尺寸，但要注意移动端地址栏和极端屏幕。
CSS 工程化如何避免全局污染？
- 可以使用命名规范、CSS Modules、Vue scoped、Shadow DOM、@scope、@layer。
- 对全局 reset、工具类、主题变量要有明确边界。
BEM 命名法解决什么问题？
- BEM 通过 Block、Element、Modifier 表达组件结构和状态。
- 它降低选择器耦合，适合无构建隔离或团队协作的大型 CSS。
CSS Modules 的优缺点是什么？
- 优点是局部作用域、类名冲突少、适合组件化。
- 缺点是全局覆盖和主题联动需要额外约定。
CSS-in-JS 的优缺点是什么？
- 优点是样式和组件状态结合紧密，适合动态主题和组件封装。
- 缺点可能是运行时成本、SSR 配置复杂、调试和缓存不如静态 CSS 直接。
Tailwind CSS 的优势是什么？
- 它通过原子类减少自定义 CSS，提升样式复用和一致性。
- 配合设计 token 和构建裁剪，适合快速开发组件化界面。
Tailwind 的风险是什么？
- 类名过长会影响可读性，复杂状态可能堆叠很多工具类。
- 团队需要统一抽象边界，避免所有样式都散落在模板里。
原子化 CSS 和传统 CSS 怎么选？
- 原子化 CSS 适合快速组合和规模化一致性。
- 传统 CSS 更适合复杂语义样式、内容排版和需要强表达的视觉区域。
CSS reset 和 normalize 有什么区别？
- reset 倾向清除浏览器默认样式。
- normalize 倾向保留合理默认值并修正浏览器差异。
现代项目还需要 CSS reset 吗？
- 通常仍需要，但应保持克制。
- 可以用
:where()降低 reset 优先级，避免影响组件覆盖。
PostCSS 是什么？
- PostCSS 是 CSS 转换工具平台，本身负责解析和转换流程。
- autoprefixer、cssnano、postcss-preset-env、移动端单位转换等都是常见插件。
Autoprefixer 根据什么添加前缀？
- 它根据 Browserslist 配置判断需要兼容哪些浏览器。
- 团队应统一 Browserslist，避免本地、构建和 CSS 兼容目标不一致。
CSS 压缩主要做什么？
- 删除空白、合并规则、缩短颜色、优化重复声明。
- 压缩要避免破坏 CSS 变量、calc、现代颜色函数和兼容性 hack。
CSS Tree Shaking 是什么？
- 它尝试移除未使用的 CSS 规则。
- 动态类名、富文本、第三方组件和运行时拼接会让误删风险变高。
PurgeCSS 类工具要注意什么？
- 要把动态类名加入 safelist。
- 对 CMS 内容、Markdown、组件库样式和运行时生成类名要特别谨慎。
CSS 代码分割有什么意义？
- 按路由或组件拆分 CSS 可以减少首屏样式体积。
- 但拆太细可能增加请求和样式闪烁风险。
CSS 加载会阻塞渲染吗？
- 普通外链 CSS 通常会阻塞页面渲染，浏览器需要 CSSOM 才能正确绘制。
- 关键 CSS 内联、非关键 CSS 延迟加载可以改善首屏。
Critical CSS 是什么？
- Critical CSS 是首屏渲染必须的最小 CSS。
- 把它内联到 HTML 可减少首屏阻塞请求，但要控制内联体积。
FOUC 是什么？
- FOUC 是无样式内容闪烁，页面先显示未应用样式的内容。
- 常见原因是 CSS 加载延迟、SSR 样式注入顺序错误或异步样式切换。
CSS 动画为什么可能导致卡顿？
- 如果动画触发布局、绘制或大量合成层，会占用主线程和 GPU 资源。
- 优先使用 transform、opacity，并减少同时动画的元素数量。
重排和重绘有什么区别？
- 重排是布局几何信息变化，需要重新计算布局。
- 重绘是视觉样式变化但布局不变，比如颜色、背景变化。
哪些 CSS 属性容易触发重排？
- width、height、margin、padding、top、left、font-size、display 等可能触发布局。
- transform 通常不触发布局，更适合动画。
CSS 如何影响 LCP？
- 阻塞 CSS、字体加载、首屏大图样式、隐藏首屏内容都可能影响 LCP。
- 优化重点是关键 CSS、资源优先级、图片尺寸和首屏渲染路径。
CSS 如何影响 CLS？
- 图片无尺寸、字体替换、异步样式加载、广告位无占位都可能造成布局偏移。
- 提前设置尺寸、用 aspect-ratio 和稳定占位能降低 CLS。
字体加载会带来什么问题？
- 可能出现 FOIT、FOUT 和布局偏移。
- 可以用
font-display、预加载关键字体、子集化和合理 fallback 优化。
font-display 有哪些常见值？
- 常见有 auto、block、swap、fallback、optional。
- 业务中常用 swap 或 optional，在可读性和视觉稳定之间权衡。
可变字体是什么？
- 可变字体用一个字体文件支持多个字重、宽度或轴。
- 它能减少字体文件数量，但单文件体积和浏览器支持仍要评估。
line-height 为什么建议不用纯像素？
- 相对值或无单位 line-height 更容易随字体缩放。
- 无单位 line-height 可继承比例，组件适配更稳定。
CSS 中 inherit、initial、unset、revert 有什么区别？
- inherit 强制继承父级，initial 回到规范初始值。
- unset 对可继承属性表现为 inherit，对不可继承属性表现为 initial；revert 回到上一层来源的值。
revert-layer 是什么？
- 它把属性回退到当前级联层之前的结果。
- 常用于和
@layer配合，撤销某一层的声明。
all 属性有什么用？
all可以一次性重置除 unicode-bidi、direction 等少数属性外的大部分属性。- 适合隔离组件，但使用不当会破坏继承和可访问性。
Shadow DOM 对 CSS 有什么影响？
- Shadow DOM 提供样式封装边界，外部样式默认进不去，内部样式默认出不来。
- 可通过 CSS 自定义属性、part、theme 等机制暴露可定制接口。
::part 是什么？
::part()允许外部页面给 Web Component 暴露出来的内部部件加样式。- 它是 Shadow DOM 组件可主题化的重要能力。
::slotted 是什么？
::slotted()用于选择插槽传入的元素。- 它只能选择 slotted 元素本身，不能深入选择其内部后代。
Popover 和 CSS 有什么关系？
- 原生 Popover 元素进入 top layer 后，可通过
:popover-open、::backdrop等样式控制表现。 - 配合
@starting-style和离散过渡可以实现更自然的出现和关闭动画。
dialog 的 ::backdrop 有什么用？
::backdrop用于控制对话框背后的遮罩层。- 它也适用于 fullscreen、popover 等 top layer 场景中的背景层。
top layer 是什么？
- top layer 是浏览器用于显示 dialog、popover、fullscreen 等元素的特殊层。
- 它通常高于普通 z-index 层叠体系。
CSS Anchor Positioning 是什么？
- 它允许一个元素根据另一个锚点元素定位。
- 适合 tooltip、popover、菜单等浮层，但生产使用要确认浏览器支持和降级。
CSS Masonry 布局是什么？
- Masonry 是瀑布流布局能力，让网格项目按可用空间自动堆叠。
- 目前仍要谨慎看兼容性，真实项目常需要降级或 JS 方案。
@supports 有什么用？
- 它可以基于浏览器是否支持某个 CSS 特性来写条件样式。
- 适合现代 CSS 渐进增强，比如容器查询、subgrid、backdrop-filter。
渐进增强在 CSS 中怎么做？
- 先写所有浏览器可用的基础样式，再用
@supports、媒体查询或新特性增强体验。 - 这样旧环境可用，新环境更好。
CSS 兼容性应该怎么判断？
- 看目标用户浏览器、Browserslist、Can I Use、MDN 兼容表和 Baseline 状态。
- 不能只看“Chrome 支持”，还要看公司实际用户环境。
Baseline 是什么？
- Baseline 是 Web 平台用于描述特性是否已在主流浏览器中广泛可用的一套参考。
- 面试中提到 Baseline，可以体现你关注现代 CSS 的可用性边界。
CSS 中媒体特性 hover 和 pointer 有什么用？
hover判断设备是否支持悬停能力。pointer判断指针精度，适合区分鼠标、触屏和粗略点击设备。
移动端为什么不要只依赖 hover？
- 触屏设备没有稳定的 hover 语义。
- 交互状态应保证点击、焦点和键盘访问都可用。
打印样式要注意什么？
- 使用
@media print优化颜色、背景、分页、隐藏交互控件。 - 票据、合同、后台报表等场景尤其要测试打印输出。
CSS 分页相关属性有哪些？
- 常见有
break-before、break-after、break-inside。 - 打印、PDF、长文档导出时比较常用。
CSS 如何处理滚动条样式？
- 现代 CSS 可使用
scrollbar-color、scrollbar-width，WebKit 内核还支持::-webkit-scrollbar系列。 - 要注意跨浏览器差异和可访问性。
accent-color 有什么用？
- 它可以改变 checkbox、radio、range 等原生表单控件强调色。
- 相比完全自定义控件，保留了更多原生可访问性。
caret-color 有什么用？
- 它控制输入框光标颜色。
- 常用于深色主题、品牌主题和富文本编辑器。
resize 属性有什么用？
- 它控制元素是否允许用户拖拽调整尺寸。
- 常用于 textarea、编辑器面板、调试窗口。
user-select 有什么用？
- 它控制文本是否可被用户选中。
- 按钮、拖拽元素可禁用选择，但正文内容不应随便禁用。
touch-action 有什么用？
- 它告诉浏览器哪些触摸手势由浏览器处理，哪些交给页面。
- 移动端拖拽、画布、轮播组件常用它减少延迟和冲突。
CSS 如何做状态样式？
- 简单状态可用伪类、data 属性、aria 属性和
:has()。 - 复杂业务状态应由 JS 或框架维护，再映射成类名或属性。
data 属性写样式有什么好处？
- data 属性能表达组件状态，比如
data-state="open"。 - 相比堆多个类名，状态语义更清晰，也方便测试和调试。
aria 属性能不能用于样式选择？
- 可以，例如
[aria-expanded="true"]。 - 但不能为了样式滥用 aria，aria 首先要表达真实可访问语义。
表单样式现代化有哪些方式？
- 使用 accent-color、appearance、伪类校验、:focus-visible、:user-invalid 等。
- 完全自定义表单控件时要补齐键盘、焦点和屏幕阅读器体验。
appearance: none 有什么用？
- 它可以移除某些原生控件的默认外观。
- 使用后需要自己补足状态、焦点和可访问反馈。
CSS 如何处理主题 token？
- 把颜色、字号、间距、圆角、阴影等抽象为 CSS 变量。
- 组件使用语义 token，比如
--color-bg-card，而不是直接使用品牌原色。
语义 token 和基础 token 有什么区别？
- 基础 token 表示原始值，比如 blue-500、space-4。
- 语义 token 表示用途，比如 text-primary、bg-surface，更适合换主题。
CSS 代码评审重点看什么？
- 看选择器是否过强、是否污染全局、响应式是否稳定、状态是否完整。
- 还要看可访问性、性能、兼容性和是否符合设计系统。
CSS Bug 常见排查顺序是什么？
- 先用 DevTools 看实际命中的规则、被覆盖的规则、盒模型和层叠上下文。
- 再检查布局容器、媒体查询、变量值、资源加载和浏览器兼容。
DevTools 看 CSS 问题主要看哪里？
- 看 Styles、Computed、Layout、Performance、Layers、Accessibility。
- 对动画和卡顿问题，还要看渲染流水线和主线程长任务。
CSS 变量值异常怎么排查？
- 在 Computed 面板看变量最终来源和 fallback。
- 检查级联顺序、主题选择器、作用域、拼写和变量是否继承到当前元素。
样式在本地正常线上异常可能是什么原因？
- CSS 加载顺序、压缩合并、浏览器版本、缓存、构建裁剪、动态类名都可能导致差异。
- 先确认线上实际 CSS 文件和本地构建产物是否一致。
CSS 文件顺序为什么重要？
- 同层级、同优先级规则下，后加载的样式会覆盖先加载的样式。
- 使用
@layer可以让顺序管理更显式。
为什么组件库样式常被业务覆盖困难？
- 可能是组件库选择器优先级过高、样式注入顺序靠后，或使用了内联样式。
- 解决方式包括暴露 CSS 变量、降低优先级、使用 layer、提供 classNames/slots。
CSS Modules 中如何写全局样式？
- 通常使用
:global(...)。 - 应限制全局选择器范围，避免破坏模块隔离。
Vue scoped 样式为什么影响不到子组件内部？
- scoped 会给当前组件元素加属性选择器，只作用于当前模板范围。
- 如果确实要穿透子组件，可使用
:deep()，但要控制范围。
:deep() 为什么要谨慎使用？
- 它会穿透组件封装，容易依赖第三方组件内部 DOM。
- 组件库升级后内部结构变化，deep 样式可能失效。
React 项目 CSS 方案怎么选？
- 小项目可用 CSS Modules 或 Tailwind。
- 复杂设计系统可结合 CSS 变量、原子类、静态提取 CSS-in-JS 或组件库方案。
SSR 中 CSS 要注意什么？
- 要避免样式闪烁、注入顺序不一致、服务端和客户端 className 不匹配。
- CSS-in-JS 项目还要正确收集关键样式并注入 HTML。
CSS-in-JS hydration 问题是什么？
- 服务端生成的 className 或样式顺序与客户端不一致时，可能出现样式错乱。
- 要保证同版本依赖、稳定生成规则和正确 SSR 配置。
CSS 和 JS 动画怎么选？
- 简单状态过渡优先 CSS。
- 复杂时间线、物理动画、手势驱动和业务编排可用 JS 动画库。
requestAnimationFrame 和 CSS transition 有什么区别？
- CSS transition 由浏览器根据声明式规则执行。
- requestAnimationFrame 让 JS 每帧控制动画，灵活但更容易写出性能问题。
GPU 加速是不是一定更快？
- 不一定，合成层过多会增加内存和合成成本。
- 只应对确实频繁变化、适合合成的元素做提升。
transform: translateZ(0) 还能随便用吗？
- 不建议随便用，它可能强制创建合成层。
- 现代项目更推荐按需使用 will-change，并在动画结束后清理。
CSS Houdini 是什么？
- Houdini 是一组底层 CSS 扩展 API，让开发者参与 CSS 解析、绘制、布局等过程。
- 实际项目中最常见的是
@property和部分 Paint API 实验。
Paint API 适合什么场景？
- 适合用代码生成背景、图案、装饰效果。
- 生产使用要谨慎看兼容性和降级方案。
CSS 如何实现不固定高度展开动画？
- 可以用 grid 行高过渡、max-height 折中、JS 测量高度，或现代离散过渡方案。
- 选择取决于内容复杂度、性能要求和兼容性。
height: auto 为什么不能传统 transition？
- auto 不是明确数值，浏览器无法简单插值。
- 可以改用 transform、grid-template-rows、max-height 或 JS 计算。
Grid 展开收起动画怎么写？
- 外层从
grid-template-rows: 0fr过渡到1fr。 - 内层内容设置
overflow: hidden，可实现不固定高度的展开效果。
CSS 如何做三角提示箭头？
- 可用伪元素配合 border、transform rotate、clip-path 或 anchor positioning。
- 浮层箭头要同时处理定位、边界碰撞和阴影。
CSS 中伪类和伪元素有什么区别？
- 伪类描述元素状态或结构位置，比如
:hover、:nth-child()。 - 伪元素表示元素的某个虚拟部分，比如
::before、::after、::marker。
::marker 有什么用？
- 它可以控制列表标记的样式。
- 适合自定义 ul、ol 的标记颜色、大小和部分字体属性。
::selection 有什么用？
- 它控制用户选中文本时的高亮样式。
- 可用于品牌化选区，但要保证对比度。
::placeholder 样式要注意什么？
- placeholder 不是 label，不应承载关键表单说明。
- 样式上要保证可读，但通常弱于正常输入文本。
nth-child 和 nth-of-type 有什么区别？
nth-child按所有兄弟元素位置计算。nth-of-type只按同标签类型的兄弟元素位置计算。
nth-child 的 of 语法有什么用？
:nth-child(2n of .item)可以只在匹配.item的兄弟集合里计数。- 它让结构选择更精确，减少额外包裹或类名。
CSS 中 @media、@container、@supports 怎么分工？
@media判断视口、设备和用户偏好。@container判断组件容器条件，@supports判断特性支持。
媒体查询断点应该怎么定？
- 不应只按设备型号定，而应根据布局在哪些宽度开始破裂来定。
- 设计系统可提供常用断点，但组件细节可用容器查询补充。
clamp 字号是否一定推荐？
- 推荐用于合理范围内的响应式字体。
- 不应让字号随视口无限缩放，仍要保证移动端和大屏可读性。
CSS 如何处理 RTL？
- 使用逻辑属性、文本方向属性和不依赖 left/right 的布局。
- 图标、箭头、边距和动画方向都要检查。
direction 和 writing-mode 有什么区别？
- direction 控制文本和行内方向，比如 LTR/RTL。
- writing-mode 控制书写模式，比如横排或竖排。
vertical-align 为什么有时不生效？
- 它主要影响行内、inline-block 和表格单元格的对齐。
- 对普通块级元素垂直居中无效，应使用 flex/grid 等布局。
line-height 居中为什么不适合多行文本？
- line-height 等于高度只适合单行文本。
- 多行文本会导致行距异常，应使用 flex/grid 或 padding 控制。
图片底部为什么有空隙？
- img 默认是 inline 元素，会和文字基线对齐，底部留出下行空间。
- 可设置
display: block或调整vertical-align。
inline-block 元素之间为什么有空隙？
- HTML 中的换行和空格会成为行内空白。
- 可通过去掉空白、设置父级 font-size 0、使用 flex/grid 解决。
CSS 如何让表格列宽稳定？
- 使用
table-layout: fixed并设置列宽。 - 对长文本配合 overflow 和 text-overflow 处理。
position absolute 的 containing block 怎么确定？
- 通常相对最近的非 static 定位祖先。
- transform、filter、contain 等属性也可能创建包含块，影响定位参照。
fixed 为什么有时不相对视口？
- 某些祖先元素设置 transform、filter、perspective 等会改变 fixed 的包含块。
- 这会导致 fixed 看起来像相对某个容器定位。
CSS 如何处理 1px 边框？
- 可使用媒体查询、transform scale、渐变背景或直接依赖现代高分屏渲染。
- 真实项目要结合设计要求和设备表现，不必过度 hack。
DPR 对 CSS 有什么影响？
- CSS 像素和设备物理像素不是一回事。
- 图片清晰度、canvas、细边框和图标资源都要考虑 DPR。
backdrop-filter 性能差怎么办？
- 减少模糊半径和覆盖面积，避免大面积实时模糊。
- 必要时用半透明纯色或预渲染背景降级。
CSS 如何减少样式重算成本？
- 减少复杂全局选择器，限定
:has()范围，避免频繁改影响大量节点的类名。 - 对大型区域可用 contain、content-visibility 和组件边界优化。
CSS 选择器性能现在还重要吗？
- 普通选择器性能通常不是瓶颈，可读性更重要。
- 但极宽泛选择器、复杂
:has()、超大 DOM 和频繁状态切换仍值得关注。
CSS 和设计系统如何配合？
- 设计系统应把颜色、字体、间距、圆角、阴影抽象为 token。
- CSS 层面负责把 token 落到主题、组件变量和状态样式。
组件样式 API 应该暴露什么？
- 优先暴露 CSS 变量、slot/part、状态属性和稳定 className。
- 不建议让使用方依赖内部 DOM 结构做深层覆盖。
CSS 如何支持白标或多品牌？
- 使用语义 token 和主题包，在品牌层覆盖变量。
- 组件内部避免写死品牌色，减少多品牌维护成本。
CSS 文件过大怎么治理？
- 做样式分层、删除无用样式、拆分路由 CSS、抽取设计 token、限制全局覆盖。
- 同时结合 bundle 分析和运行时 Coverage 找真实未使用规则。
Chrome Coverage 看 CSS 有什么用？
- 它能显示页面加载后哪些 CSS 规则没有被使用。
- 但只能代表当前路径和交互状态，不能简单全删。
CSS 面试如何回答才不水？
- 每题尽量说清概念、使用场景、风险和项目实践。
- 遇到新特性要补一句兼容性和降级策略，这会比只背语法更像真实经验。
