[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f93Og6aBWmNrT652jlf7dl6kNnRJQUZlSxlDPPTevF6E":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":21,"subCategory":24,"comments":26,"status":17,"reason":12,"notice":12,"visitCount":27,"commentCount":28,"keywords":29},194,"2026-09-02T13:49:28.338Z","CSS 高级面试题 20 道（含 Sass、Tailwind CSS）","# CSS 高级面试题 20 道（含 Sass、Tailwind CSS）\n\n---\n\n## 1. 讲讲 CSS 的层叠上下文、层叠等级、渲染顺序？\n\n**答案：**\n\n层叠上下文是页面三维层级容器，满足特定条件（定位、`z-index`、`opacity`、`transform`、`filter` 等）即可生成，子元素层级仅在当前上下文内比较，无法跨上下文覆盖。\n\n渲染优先级从低到高：\n\n1. 背景/边框\n2. 负 `z-index`\n3. 普通流式元素\n4. inline 行内元素\n5. `z-index: 0`\n6. 正 `z-index`\n\n核心：`z-index` 仅对定位元素生效，且受父层叠上下文限制。\n\n---\n\n## 2. BFC 是什么？触发条件与应用场景？\n\n**答案：**\n\nBFC（块级格式化上下文）是独立的渲染区域，内部元素布局不会影响外部，外部也不会干扰内部。\n\n**触发条件：** `overflow` 非 `visible`、`float` 不为 `none`、`position` 为 `absolute` / `fixed`、`display` 为 `block` / `flex` / `grid` / `inline-block` 等。\n\n**核心用途：**\n\n- 解决高度塌陷\n- 清除浮动\n- 防止 `margin` 外边距重叠\n- 适应两栏布局\n\n---\n\n## 3. CSS 包含块（containing block）计算规则？\n\n**答案：**\n\n包含块是元素尺寸、定位的参考容器，不同定位规则不同：\n\n- 静态/相对定位：父级内容区为包含块\n- 绝对定位：找最近非静态定位祖先，以其 padding 区为包含块\n- 固定定位：始终以视口为包含块\n\n百分比宽高、`top` / `left` 等值均基于包含块计算。\n\n---\n\n## 4. 重排（回流）和重绘的区别、如何优化？\n\n**答案：**\n\n- **重排**：元素几何尺寸/位置改变，浏览器重新计算布局，开销极大。\n- **重绘**：元素样式颜色/背景改变，布局不变，仅重新绘制像素，开销较小。\n\n**优化方式：**\n\n- 集中修改样式\n- 使用 `class` 批量切换\n- 开启 GPU 加速\n- 避免频繁读取布局属性\n- 使用 flex/grid 减少重排\n\n---\n\n## 5. CSS 如何开启 GPU 加速？优缺点？\n\n**答案：**\n\n通过 `transform: translateZ(0)`、`will-change`、`opacity` 触发 GPU 分层加速。\n\n**优点：**\n\n- 动画流畅\n- 避开主线程\n- 减少卡顿\n\n**缺点：**\n\n- 过度分层会占用大量显存\n- 可能导致页面卡顿\n- 耗电增加\n\n---\n\n## 6. 讲讲 Sass 的核心特性，以及和原生 CSS 的区别？\n\n**答案：**\n\nSass 是 CSS 预处理器，拓展 CSS 可编程能力，编译后生成原生 CSS，浏览器不直接识别 Sass。\n\n**核心特性：** 变量、嵌套语法、混合宏 mixin、继承 extend、函数、条件判断、循环、模块化导入。\n\n解决原生 CSS 无复用、无逻辑、层级混乱、维护成本高的问题。\n\n---\n\n## 7. Sass `@mixin`、`@extend`、`%` 占位符区别？\n\n**答案：**\n\n- **`@mixin`**：可传参、重复复用，调用处完整拷贝样式，适合可变样式（按钮、布局）\n- **`@extend`**：样式继承，合并选择器，不重复拷贝代码，适合固定通用样式\n- **`%` 占位符**：仅被继承，自身不编译输出 CSS，纯净无冗余，最优继承方案\n\n---\n\n## 8. Sass 循环、条件判断如何使用？实际业务场景？\n\n**答案：**\n\n支持 `@for`、`@each`、`@if`、`@else` 逻辑语法。\n\n**业务场景：** 批量生成字体大小、边距、颜色类名、统一布局样式，减少重复代码，适配主题色批量切换。\n\n---\n\n## 9. Sass 变量和 CSS 原生变量（`--var`）区别？\n\n**答案：**\n\n- **Sass 变量**：编译期生效，编译后固化为固定值，不支持运行时动态修改、无 DOM 作用域\n- **CSS 变量**：运行时生效，支持 JS 动态修改、支持局部作用域、响应式切换主题\n\n**业务搭配：** Sass 做编译期样式复用，CSS 变量做运行时主题动态切换。\n\n---\n\n## 10. 为什么项目中推荐 Tailwind CSS 替代传统 Sass？\n\n**答案：**\n\nTailwind 是原子化 CSS 框架，相比 Sass 预处理器优势：\n\n- 无需手写大量自定义样式，内置海量原子类，开发效率极高\n- 自带 Tree-shaking，仅打包使用过的样式，最终 CSS 体积极小\n- 统一设计规范（间距、色值、圆角），团队样式统一无混乱\n- 支持 JIT 即时编译，开发、打包速度更快\n\n---\n\n## 11. Tailwind JIT 模式原理与优势？\n\n**答案：**\n\nJIT（即时编译）模式不会预生成所有工具类，而是扫描项目代码，只编译使用过的原子类。\n\n**优势：**\n\n- 打包体积极致精简\n- 支持任意自定义值（如 `w-[32.5px]`）\n- 开发编译速度更快\n- 无冗余样式\n\n---\n\n## 12. Tailwind 如何自定义主题、色值、间距？\n\n**答案：**\n\n在 `tailwind.config.js` 中通过 `theme` 配置自定义：`colors`（主题色）、`spacing`（间距）、`borderRadius`（圆角）、`fontSize` 等。\n\n支持 `extend` 拓展原有配置（不覆盖默认样式），也可直接重写覆盖默认主题，适配项目专属设计规范。\n\n---\n\n## 13. Tailwind 自定义任意样式的三种方式？\n\n**答案：**\n\n- **任意值语法**：`w-[300px]`、`text-[#f00]`，快速写临时样式\n- **`@apply` 指令**：抽取通用原子类组合，封装成自定义样式类，复用代码\n- **配置文件拓展**：全局封装通用主题、工具类，全项目生效\n\n---\n\n## 14. `@apply` 的作用和使用场景？有什么坑？\n\n**答案：**\n\n**作用：** 将多个 Tailwind 原子类合并为一个自定义 CSS 类，解决 class 堆砌问题。\n\n**场景：** 通用按钮、卡片、输入框等重复组件样式封装。\n\n**坑：** `@apply` 不支持动态类、嵌套过多会影响编译性能，复杂样式建议自定义 CSS。\n\n---\n\n## 15. Tailwind 和 Sass 能否混用？最佳实践？\n\n**答案：**\n\n可以完美混用，主流最佳实践：\n\n- 日常页面布局、简单样式直接用 Tailwind 原子类\n- 复杂动画、嵌套样式、批量逻辑样式用 Sass\n- 通用样式复用使用 `@apply` + Sass 变量结合\n\n规避纯 Sass 手写大量基础样式，减少冗余代码。\n\n---\n\n## 16. CSS 居中方案大全（水平+垂直，高级场景）？\n\n**答案：**\n\n- **flex 居中**：父级 `flex` + `justify-center` + `items-center`（最通用）\n- **grid 居中**：父级 `grid` + `place-items-center`（最简代码）\n- **绝对定位居中**：`absolute` + `top/left = 50%` + `translate(-50%, -50%)`（不定宽高最优）\n- **margin 居中**：`margin: 0 auto`（仅水平，定宽元素）\n\n---\n\n## 17. 如何实现 0.5px 细边框？适配多端？\n\n**答案：**\n\n原生 px 无法实现 0.5 像素，通过 `transform` 缩放实现：\n\n```css\n/* 伪元素生成 1px 边框，再 scale 缩放 */\n.border-half {\n  position: relative;\n}\n.border-half::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 1px;\n  background: #ccc;\n  transform: scaleY(0.5);\n  transform-origin: top left;\n}\n```\n\n适配高清屏，解决移动端粗边框问题，兼容所有机型。\n\n---\n\n## 18. CSS 动画 `transform` 优于 `top/left` 的原因？\n\n**答案：**\n\n- `transform` 触发合成层重绘，不触发重排，走 GPU 加速，性能极高\n- `top/left` 修改会触发页面重排+重绘，主线程阻塞，动画卡顿\n\n高端动画、轮播、悬浮动效一律优先使用 `transform`。\n\n---\n\n## 19. 移动端适配方案：rem、vw、Tailwind 适配原理？\n\n**答案：**\n\n- **rem**：基于根字体大小适配，需 JS 动态设置 html 字体\n- **vw**：基于视口宽度适配，纯 CSS 实现，无 JS 依赖\n- **Tailwind**：默认基于 vw/rem 适配，可配置基准值，内置响应式前缀（sm/md/lg），一键多端适配\n\n---\n\n## 20. 如何解决 Tailwind 样式权重覆盖冲突问题？\n\n**答案：**\n\n- 使用 Tailwind 内置 `!` 强制权重：`!text-red-500`\n- 调整自定义 CSS 引入顺序，后引入样式覆盖前置样式\n- 通过 `@layer` 分层（base/components/utilities）控制样式权重层级\n- 避免自定义高权重 `!important`，统一使用框架规范方案\n","这里给大家推荐20道有关web前端css样式相关的高级面试题，希望对大家有帮助.","",525978185445445,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"16100000003","上班墨鱼",1,"https://image.xinwei.ltd/bbd06233d9b5c67c9f8ddd35b63cb81f1710561355517.jpeg","没有什么缺点，大家低调点","2024-03-16T00:30:44.932Z",2,{"id":21,"name":23},"IT技术",{"id":21,"name":25,"parentId":21},"JavaScript&HTML&CSS",[],10,0,"css,css面试题,sass面试题,scss面试题,tailwind,tailwind css,tailwind css面试题,sass,scss,前端,web style,web,面试题,h5"]