CSS 高级面试题 20 道（含 Sass、Tailwind CSS）

1. 讲讲 CSS 的层叠上下文、层叠等级、渲染顺序？

答案：

层叠上下文是页面三维层级容器，满足特定条件（定位、z-index、opacity、transform、filter 等）即可生成，子元素层级仅在当前上下文内比较，无法跨上下文覆盖。

渲染优先级从低到高：

1. 背景/边框
2. 负 z-index
3. 普通流式元素
4. inline 行内元素
5. z-index: 0
6. 正 z-index

核心：z-index 仅对定位元素生效，且受父层叠上下文限制。

2. BFC 是什么？触发条件与应用场景？

答案：

BFC（块级格式化上下文）是独立的渲染区域，内部元素布局不会影响外部，外部也不会干扰内部。

触发条件： overflow 非 visible、float 不为 none、position 为 absolute / fixed、display 为 block / flex / grid / inline-block 等。

核心用途：

• 解决高度塌陷
• 清除浮动
• 防止 margin 外边距重叠
• 适应两栏布局

3. CSS 包含块（containing block）计算规则？

答案：

包含块是元素尺寸、定位的参考容器，不同定位规则不同：

• 静态/相对定位：父级内容区为包含块
• 绝对定位：找最近非静态定位祖先，以其 padding 区为包含块
• 固定定位：始终以视口为包含块

百分比宽高、top / left 等值均基于包含块计算。

4. 重排（回流）和重绘的区别、如何优化？

答案：

• 重排：元素几何尺寸/位置改变，浏览器重新计算布局，开销极大。
• 重绘：元素样式颜色/背景改变，布局不变，仅重新绘制像素，开销较小。

优化方式：

• 集中修改样式
• 使用 class 批量切换
• 开启 GPU 加速
• 避免频繁读取布局属性
• 使用 flex/grid 减少重排

5. CSS 如何开启 GPU 加速？优缺点？

答案：

通过 transform: translateZ(0)、will-change、opacity 触发 GPU 分层加速。

优点：

• 动画流畅
• 避开主线程
• 减少卡顿

缺点：

• 过度分层会占用大量显存
• 可能导致页面卡顿
• 耗电增加

6. 讲讲 Sass 的核心特性，以及和原生 CSS 的区别？

答案：

Sass 是 CSS 预处理器，拓展 CSS 可编程能力，编译后生成原生 CSS，浏览器不直接识别 Sass。

核心特性： 变量、嵌套语法、混合宏 mixin、继承 extend、函数、条件判断、循环、模块化导入。

解决原生 CSS 无复用、无逻辑、层级混乱、维护成本高的问题。

7. Sass @mixin、@extend、% 占位符区别？

答案：

• @mixin：可传参、重复复用，调用处完整拷贝样式，适合可变样式（按钮、布局）
• @extend：样式继承，合并选择器，不重复拷贝代码，适合固定通用样式
• % 占位符：仅被继承，自身不编译输出 CSS，纯净无冗余，最优继承方案

8. Sass 循环、条件判断如何使用？实际业务场景？

答案：

支持 @for、@each、@if、@else 逻辑语法。

业务场景： 批量生成字体大小、边距、颜色类名、统一布局样式，减少重复代码，适配主题色批量切换。

9. Sass 变量和 CSS 原生变量（--var）区别？

答案：

• Sass 变量：编译期生效，编译后固化为固定值，不支持运行时动态修改、无 DOM 作用域
• CSS 变量：运行时生效，支持 JS 动态修改、支持局部作用域、响应式切换主题

业务搭配： Sass 做编译期样式复用，CSS 变量做运行时主题动态切换。

10. 为什么项目中推荐 Tailwind CSS 替代传统 Sass？

答案：

Tailwind 是原子化 CSS 框架，相比 Sass 预处理器优势：

• 无需手写大量自定义样式，内置海量原子类，开发效率极高
• 自带 Tree-shaking，仅打包使用过的样式，最终 CSS 体积极小
• 统一设计规范（间距、色值、圆角），团队样式统一无混乱
• 支持 JIT 即时编译，开发、打包速度更快

11. Tailwind JIT 模式原理与优势？

答案：

JIT（即时编译）模式不会预生成所有工具类，而是扫描项目代码，只编译使用过的原子类。

优势：

• 打包体积极致精简
• 支持任意自定义值（如 w-[32.5px]）
• 开发编译速度更快
• 无冗余样式

12. Tailwind 如何自定义主题、色值、间距？

答案：

在 tailwind.config.js 中通过 theme 配置自定义：colors（主题色）、spacing（间距）、borderRadius（圆角）、fontSize 等。

支持 extend 拓展原有配置（不覆盖默认样式），也可直接重写覆盖默认主题，适配项目专属设计规范。

13. Tailwind 自定义任意样式的三种方式？

答案：

• 任意值语法：w-[300px]、text-[#f00]，快速写临时样式
• @apply 指令：抽取通用原子类组合，封装成自定义样式类，复用代码
• 配置文件拓展：全局封装通用主题、工具类，全项目生效

14. @apply 的作用和使用场景？有什么坑？

答案：

作用： 将多个 Tailwind 原子类合并为一个自定义 CSS 类，解决 class 堆砌问题。

场景： 通用按钮、卡片、输入框等重复组件样式封装。

坑： @apply 不支持动态类、嵌套过多会影响编译性能，复杂样式建议自定义 CSS。

15. Tailwind 和 Sass 能否混用？最佳实践？

答案：

可以完美混用，主流最佳实践：

• 日常页面布局、简单样式直接用 Tailwind 原子类
• 复杂动画、嵌套样式、批量逻辑样式用 Sass
• 通用样式复用使用 @apply + Sass 变量结合

规避纯 Sass 手写大量基础样式，减少冗余代码。

16. CSS 居中方案大全（水平+垂直，高级场景）？

答案：

• flex 居中：父级 flex + justify-center + items-center（最通用）
• grid 居中：父级 grid + place-items-center（最简代码）
• 绝对定位居中：absolute + top/left = 50% + translate(-50%, -50%)（不定宽高最优）
• margin 居中：margin: 0 auto（仅水平，定宽元素）

17. 如何实现 0.5px 细边框？适配多端？

答案：

原生 px 无法实现 0.5 像素，通过 transform 缩放实现：

/* 伪元素生成 1px 边框，再 scale 缩放 */
.border-half {
  position: relative;
}
.border-half::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleY(0.5);
  transform-origin: top left;
}

适配高清屏，解决移动端粗边框问题，兼容所有机型。

18. CSS 动画 transform 优于 top/left 的原因？

答案：

• transform 触发合成层重绘，不触发重排，走 GPU 加速，性能极高
• top/left 修改会触发页面重排+重绘，主线程阻塞，动画卡顿

高端动画、轮播、悬浮动效一律优先使用 transform。

19. 移动端适配方案：rem、vw、Tailwind 适配原理？

答案：

• rem：基于根字体大小适配，需 JS 动态设置 html 字体
• vw：基于视口宽度适配，纯 CSS 实现，无 JS 依赖
• Tailwind：默认基于 vw/rem 适配，可配置基准值，内置响应式前缀（sm/md/lg），一键多端适配

20. 如何解决 Tailwind 样式权重覆盖冲突问题？

答案：

• 使用 Tailwind 内置 ! 强制权重：!text-red-500
• 调整自定义 CSS 引入顺序，后引入样式覆盖前置样式
• 通过 @layer 分层（base/components/utilities）控制样式权重层级
• 避免自定义高权重 !important，统一使用框架规范方案