前端面试题 - CSS篇

精心整理的CSS面试题集，涵盖基础到高级知识点，助你轻松应对前端面试。

📋 文档说明

CSS在前端面试中的重要性

CSS是前端开发的三大基石之一，在面试中占据重要地位。面试官通常会从以下几个方面考察候选人的CSS能力：

基础概念：盒模型、选择器、优先级等核心概念
布局能力：Flexbox、Grid、传统布局等实际应用
工程化思维：预处理器、CSS架构、模块化方案
性能优化：重绘重排、GPU加速、加载优化
前沿技术：CSS变量、容器查询、原子化CSS等

题目统计

统计项	数量
总题数	70道
基础题	15道
中级题	40道
高级题	15道

难度标识说明

⭐ 基础：必须掌握的核心概念，面试高频考点
⭐⭐ 中级：进阶知识，体现实际开发经验
⭐⭐⭐ 高级：深度原理和前沿技术，加分项

CSS3新特性

Flexbox弹性布局

1. 什么是Flexbox？它适用于什么场景？

难度：⭐ 基础
标签：#Flexbox #布局

问题描述：
请解释Flexbox布局模型的基本概念，以及它在哪些场景下最适合使用。

参考答案要点：

Flexbox（弹性盒布局）是一种用于在容器内分配空间和对齐内容的CSS布局模型
适用于一维布局（行或列），如导航栏、卡片列表、垂直居中等
核心属性：justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-direction（方向）

2. flex: 1 是什么的简写？

难度：⭐⭐ 中级
标签：#Flexbox #属性

问题描述：
请详细解释flex: 1的含义，以及flex-grow、flex-shrink、flex-basis三个属性的作用。

参考答案要点：

flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写
flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink: 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis: 定义在分配多余空间之前，项目占据的主轴空间

3. 使用Flexbox实现水平垂直居中的方法？

难度：⭐ 基础
标签：#Flexbox #居中

问题描述：
请写出使用Flexbox实现元素水平垂直居中的CSS代码。

参考答案要点：

设置容器为Flex布局
使用justify-content: center实现水平居中
使用align-items: center实现垂直居中

代码示例：

CSS

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

4. Flex容器的主轴和交叉轴是如何定义的？

难度：⭐⭐ 中级
标签：#Flexbox #概念

问题描述：
请解释Flexbox中的主轴（Main Axis）和交叉轴（Cross Axis）是如何确定的，以及它们的起点和终点。

参考答案要点：

flex-direction: row（默认）：主轴为水平方向，交叉轴为垂直方向
flex-direction: column：主轴为垂直方向，交叉轴为水平方向
主轴起点：main start，终点：main end
交叉轴起点：cross start，终点：cross end

5. align-content和align-items的区别？

难度：⭐⭐ 中级
标签：#Flexbox #属性

问题描述：
请解释align-content和align-items两个属性的区别和使用场景。

参考答案要点：

align-items: 定义项目在交叉轴上的对齐方式（单行），适用于单行的Flex容器
align-content: 定义多根轴线的对齐方式（多行），只有项目换行时才有效
align-content在flex-wrap: nowrap时无效

Grid网格布局

6. Flex布局和Grid布局的适用场景有哪些不同？

难度：⭐⭐ 中级
标签：#Grid #Flexbox #对比

问题描述：
请对比Flexbox和Grid两种布局方式，说明它们各自的适用场景。

参考答案要点：

Flexbox: 一维布局（行或列），适合简单线性布局如导航栏、卡片列表
Grid: 二维布局（行和列同时控制），适合复杂页面结构如仪表盘、整体布局
Grid可以同时控制两个维度，Flexbox更适合组件内部布局
两者可以结合使用：Grid用于整体布局，Flexbox用于组件内部

7. Grid布局中的fr单位是什么？

难度：⭐⭐ 中级
标签：#Grid #单位

问题描述：
请解释Grid布局中fr单位的含义和使用方法。

参考答案要点：

fr（fraction）是Grid布局中的分数单位
表示网格容器中可用空间的一份
例如：grid-template-columns: 1fr 2fr 表示第二列是第一列的两倍宽度
fr单位会自动计算剩余空间的分配比例

8. 如何使用Grid实现等高布局？

难度：⭐⭐ 中级
标签：#Grid #布局

问题描述：
请写出使用Grid布局实现等高列的CSS代码。

参考答案要点：

Grid布局默认就是等高布局
align-items: stretch是默认值，会自动拉伸子元素高度

代码示例：

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch; /* 等高，默认值 */
}

9. 如何实现瀑布流布局？

难度：⭐⭐⭐ 高级
标签：#Grid #瀑布流 #布局

问题描述：
请介绍实现瀑布流布局的几种方法。

参考答案要点：

方法1：使用CSS Columns实现简单瀑布流
方法2：使用Grid布局配合grid-auto-rows
方法3：使用JavaScript库（如Masonry）实现复杂瀑布流

代码示例：

CSS

/* 方法1: CSS Columns */
.container {
  column-count: 3;
  column-gap: 20px;
}
.item {
  break-inside: avoid; /* 防止元素被截断 */
}

/* 方法2: Grid */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px; /* 基础行高 */
}

动画和过渡

10. transition和animation的区别？

难度：⭐⭐ 中级
标签：#动画 #过渡

问题描述：
请对比CSS中的transition和animation，说明它们的区别和适用场景。

参考答案要点：

特性	transition	animation
触发条件	需要状态变化（如:hover）	可自动执行，无需触发
关键帧	只有开始和结束	可定义多个关键帧
循环控制	不支持	支持无限循环
适用场景	简单状态变化	复杂动画序列

11. 如何实现CSS动画性能优化？

难度：⭐⭐⭐ 高级
标签：#动画 #性能优化

问题描述：
请介绍CSS动画性能优化的几种方法。

参考答案要点：

使用transform和opacity：这两个属性不会触发重排，只触发合成
使用will-change：will-change: transform 提示浏览器优化
避免布局抖动：批量读写样式属性
启用GPU加速：transform: translateZ(0) 或 translate3d(0,0,0)
减少动画元素数量：避免同时动画过多元素

12. CSS动画的最小时间间隔是多少？

难度：⭐⭐ 中级
标签：#动画 #原理

问题描述：
请解释CSS动画的最小时间间隔与什么有关，具体数值是多少？

参考答案要点：

与显示器刷新率有关
60Hz显示器：约16.7ms（1000ms/60）
120Hz显示器：约8.3ms
144Hz显示器：约6.9ms
使用requestAnimationFrame可以自动适配刷新率

13. animation-fill-mode的作用？

难度：⭐⭐ 中级
标签：#动画 #属性

问题描述：
请解释animation-fill-mode属性的各个值及其作用。

参考答案要点：

forwards: 动画结束后保持最后一帧样式
backwards: 动画开始前应用第一帧样式（考虑animation-delay）
both: 同时应用forwards和backwards
none: 默认值，不应用任何特殊样式

变换和滤镜

14. transform有哪些常用函数？

难度：⭐ 基础
标签：#Transform #变换

问题描述：
请列举transform属性的常用函数及其作用。

参考答案要点：

位移：translate(x, y)、translateX()、translateY()、translate3d()
旋转：rotate(angle)、rotateX()、rotateY()、rotate3d()
缩放：scale(x, y)、scaleX()、scaleY()、scale3d()
倾斜：skew(x-angle, y-angle)
矩阵变换：matrix()、matrix3d()

15. 如何使用CSS绘制三角形？

难度：⭐⭐ 中级
标签：#CSS技巧 #图形

问题描述：
请写出使用纯CSS绘制三角形的代码。

参考答案要点：

利用边框的特性实现
设置宽高为0，通过边框宽度和颜色控制三角形形状

代码示例：

CSS

/* 向上三角形 */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}

/* 向下三角形 */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}

16. 如何实现毛玻璃效果？

难度：⭐⭐ 中级
标签：#CSS效果 #滤镜

问题描述：
请写出实现毛玻璃（Glassmorphism）效果的CSS代码。

参考答案要点：

使用backdrop-filter: blur()实现背景模糊
配合半透明背景色增强效果
注意浏览器兼容性

代码示例：

CSS

.glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari兼容 */
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

布局方案

传统布局

17. 文档流（Normal Flow）是什么？

难度：⭐ 基础
标签：#基础概念 #文档流

问题描述：
请解释CSS中的文档流（Normal Flow）概念。

参考答案要点：

默认的布局方式，元素按照HTML顺序排列
块级元素独占一行（div, p, h1-h6等）
行内元素在同一行显示（span, a, em等）
可通过display属性调整元素行为
脱离文档流的方式：float、position: absolute/fixed、display: none

18. 清除浮动的方案有哪些？

难度：⭐⭐ 中级
标签：#浮动 #清除浮动

问题描述：
请列举清除浮动的几种方法，并说明推荐使用哪种。

参考答案要点：

clearfix伪元素法（推荐）：最优雅，不破坏结构
overflow触发BFC：简单但有副作用（可能隐藏内容）
空div+clear：增加无意义标签，不推荐

代码示例：

CSS

/* 方法1: clearfix伪元素法（推荐） */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 方法2: overflow触发BFC */
.container {
  overflow: hidden; /* 或 auto */
}

/* 方法3: 空div+clear */
<div style="clear: both;"></div>

19. position属性的值及其特点？

难度：⭐⭐ 中级
标签：#定位 #position

问题描述：
请详细说明position属性的各个值及其特点。

参考答案要点：

值	定位基准	是否脱离文档流	特点
static	默认值，正常文档流	否	无特殊定位
relative	相对于自身原位置	否（占据原空间）	保留原位置
absolute	相对于最近定位祖先	是	完全脱离文档流
fixed	相对于视口	是	滚动时位置不变
sticky	相对+固定混合	否（滚动前）	滚动到阈值时粘性定位

现代布局

20. 两栏布局：左边固定，右边自适应的实现方案？

难度：⭐⭐ 中级
标签：#布局 #两栏布局

问题描述：
请写出实现左侧固定宽度、右侧自适应宽度的两栏布局的多种方法。

参考答案要点：

方法1：Flex布局（推荐）- 最简洁现代
方法2：float + BFC - 兼容性较好
方法3：Grid布局 - 适合复杂布局

代码示例：

CSS

/* 方法1: Flex布局（推荐） */
.container {
  display: flex;
}
.left {
  width: 200px;
  flex-shrink: 0; /* 防止被压缩 */
}
.right {
  flex: 1;
}

/* 方法2: float + BFC */
.left {
  width: 200px;
  float: left;
}
.right {
  overflow: hidden; /* 触发BFC */
}

/* 方法3: Grid布局 */
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

21. 圣杯布局和双飞翼布局的区别？

难度：⭐⭐⭐ 高级
标签：#布局 #圣杯布局 #双飞翼布局

问题描述：
请解释圣杯布局和双飞翼布局的异同点。

参考答案要点：

共同点：都是三栏布局，中间栏优先渲染（内容优先）
圣杯布局：使用padding为两侧留出空间，通过相对定位调整位置
双飞翼布局：中间栏嵌套子元素，通过margin为两侧留出空间
差异：圣杯布局使用定位，双飞翼布局使用嵌套结构
现代替代：使用Flexbox或Grid可以更简单地实现

22. 如何实现粘性布局（Sticky）？

难度：⭐⭐ 中级
标签：#定位 #粘性布局

问题描述：
请写出实现粘性定位（Sticky Positioning）的CSS代码。

参考答案要点：

使用position: sticky实现
需要指定阈值（top/left/right/bottom）
粘性定位是相对定位和固定定位的混合

代码示例：

CSS

.header {
  position: sticky;
  top: 0; /* 距离视口顶部0时粘性定位 */
  z-index: 100;
}

/* 侧边栏粘性定位 */
.sidebar {
  position: sticky;
  top: 20px; /* 距离顶部20px时开始粘性 */
  height: fit-content;
}

响应式设计

23. 什么是响应式设计？基本原理是什么？

难度：⭐⭐ 中级
标签：#响应式 #移动端

问题描述：
请解释响应式设计的概念及其基本原理。

参考答案要点：

定义：一个网站能够兼容多个终端，智能地根据不同设备环境进行相应布局
基本原理：通过媒体查询检测不同设备屏幕尺寸，设置不同的CSS样式
核心技术：
- 媒体查询（Media Queries）
- 弹性布局（Flexbox/Grid）
- 相对单位（%、em、rem、vw/vh）
- 流式图片和媒体

24. 媒体查询的使用方法？

难度：⭐ 基础
标签：#响应式 #媒体查询

问题描述：
请写出媒体查询的基本语法和常用断点。

参考答案要点：

使用@media规则定义
常用断点：手机(<768px)、平板(768-1024px)、桌面(>1024px)

代码示例：

CSS

/* 手机 */
@media screen and (max-width: 767px) {
  body { font-size: 14px; }
}

/* 平板 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body { font-size: 16px; }
}

/* 桌面 */
@media screen and (min-width: 1025px) {
  body { font-size: 18px; }
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #fff; }
}

移动端适配

25. 移动端适配方案有哪些？

难度：⭐⭐ 中级
标签：#移动端 #适配

问题描述：
请对比移动端常用的几种适配方案。

参考答案要点：

方案	原理	优点	缺点
rem	相对于根元素字体大小	兼容性好	需要JS设置font-size
vw/vh	视口百分比	无需JS	低版本安卓不支持
rpx	小程序专属	自动转换	仅限小程序
百分比	相对于父元素	简单	难以统一

26. rem适配方案的具体实现？

难度：⭐⭐ 中级
标签：#移动端 #rem

问题描述：
请写出rem适配方案的JavaScript实现代码。

参考答案要点：

根据设计稿宽度计算根元素字体大小
监听窗口resize事件动态调整
通常将设计稿分为10份

代码示例：

JAVASCRIPT

// 设置根元素字体大小
function setRem() {
  const designWidth = 750; // 设计稿宽度
  const baseSize = 75; // 750 / 10 = 75
  const scale = document.documentElement.clientWidth / designWidth;
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px';
}

setRem();
window.addEventListener('resize', setRem);

// CSS中使用
.element {
  width: 3.75rem; /* 375px / 100 = 3.75rem */
}

27. vw方案和rem方案如何选择？

难度：⭐⭐ 中级
标签：#移动端 #vw #rem

问题描述：
请说明vw方案和rem方案的优缺点，以及在什么场景下选择哪种方案。

参考答案要点：

vw方案：现代项目首选，无需JS，直接使用CSS
rem方案：需要兼容低版本安卓（4.4以下）时使用
推荐：使用postcss-px-to-viewport或postcss-pxtorem插件自动转换
vw兼容性：iOS 8+、Android 4.4+，现代浏览器完全支持

28. 如何解决移动端1px边框问题？

难度：⭐⭐⭐ 高级
标签：#移动端 #边框 #兼容性

问题描述：
移动端由于设备像素比（DPR）问题，1px边框在高清屏上显示过粗，请介绍解决方案。

参考答案要点：

方法1：伪元素+transform缩放（最常用）
方法2：使用viewport的scale（影响全局）
方法3：使用border-image（复杂）

代码示例：

CSS

/* 方法1: 伪元素+transform缩放 */
.border-1px {
  position: relative;
}
.border-1px::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

/* 适配不同DPR */
@media (-webkit-min-device-pixel-ratio: 2) {
  .border-1px::after { transform: scaleY(0.5); }
}
@media (-webkit-min-device-pixel-ratio: 3) {
  .border-1px::after { transform: scaleY(0.333); }
}

选择器和优先级

选择器类型

29. CSS选择器有哪些类型？

难度：⭐ 基础
标签：#选择器 #基础

问题描述：
请列举CSS中的各种选择器类型。

参考答案要点：

基础选择器：元素选择器（div）、类选择器（.class）、ID选择器（#id）、通配符（*）
关系选择器：后代（空格）、子代（>）、相邻兄弟（+）、通用兄弟（~）
属性选择器：[attr]、[attr=value]、[attr^=value]、[attr$=value]、[attr*=value]
伪类选择器：:hover、:focus、:nth-child()、:first-child、:last-child等
伪元素选择器：::before、::after、::first-line、::first-letter

30. 伪类和伪元素的区别？

难度：⭐⭐ 中级
标签：#选择器 #伪类 #伪元素

问题描述：
请解释伪类和伪元素的区别。

参考答案要点：

特性	伪类	伪元素
表示	元素的特定状态	元素的特定部分
语法	单冒号 `:`	双冒号 `::`（CSS3）
示例	:hover、:focus	::before、::after
作用	选择已有元素的状态	创建虚拟元素
数量	一个元素可有多个状态	创建新的虚拟元素

优先级计算

31. CSS选择器优先级如何计算？

难度：⭐⭐ 中级
标签：#优先级 #选择器

问题描述：
请详细说明CSS选择器优先级的计算方法。

参考答案要点：优先级权重（A, B, C, D）：

A: 内联样式（1或0）
B: ID选择器数量
C: 类选择器 + 属性选择器 + 伪类数量
D: 元素选择器 + 伪元素数量

示例：

CSS

/* (0,1,2,2) - 1个ID，2个类/伪类，2个元素 */
#nav .selected > a:hover  

/* (0,0,2,1) - 0个ID，2个类，1个元素 */
li.red.level

32. !important的作用和使用注意事项？

难度：⭐⭐ 中级
标签：#优先级 #important

问题描述：
请解释!important的作用以及使用时的注意事项。

参考答案要点：

作用：覆盖其他任何优先级规则
优先级顺序：!important > 内联样式 > ID > 类/伪类/属性 > 元素
注意事项：
- 尽量避免使用，破坏优先级规则
- 仅在覆盖第三方库样式时使用
- 不要滥用，会导致维护困难
- 一旦使用，后续覆盖需要更多!important

33. 关于伪类LVHA的解释？

难度：⭐⭐ 中级
标签：#伪类 #链接

问题描述：
请解释LVHA的含义及其顺序的重要性。

参考答案要点：

Link（:link）- 未访问链接
Visited（:visited）- 已访问链接
Hover（:hover）- 鼠标悬停
Active（:active）- 激活状态（点击时）
顺序：:link > :visited > :hover > :active（按此顺序定义）
原因：后面的规则会覆盖前面的，需要按优先级从低到高排列

盒模型和BFC

盒模型

34. 什么是CSS盒模型？标准盒模型与IE怪异盒模型的区别？

难度：⭐ 基础
标签：#盒模型 #基础

问题描述：
请解释CSS盒模型的概念，以及标准盒模型与IE怪异盒模型的区别。

参考答案要点：

盒模型组成：content（内容）+ padding（内边距）+ border（边框）+ margin（外边距）
标准盒模型（content-box）：width只包含content
- 总宽度 = width + padding + border + margin
怪异盒模型（border-box）：width包含content + padding + border
- 总宽度 = width + margin
IE6及以下默认使用怪异盒模型

35. box-sizing属性的作用？

难度：⭐ 基础
标签：#盒模型 #属性

问题描述：
请解释box-sizing属性的作用及推荐使用方式。

参考答案要点：

box-sizing用于控制盒模型的计算方式
border-box更直观，设置width后就是最终宽度

代码示例：

CSS

/* 标准盒模型 */
.box1 {
  box-sizing: content-box;
  width: 100px;
  padding: 10px;
  /* 实际宽度 = 100 + 10*2 = 120px */
}

/* 怪异盒模型（推荐） */
.box2 {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  /* 实际宽度 = 100px，content宽度 = 80px */
}

/* 全局设置（推荐） */
*, *::before, *::after {
  box-sizing: border-box;
}

BFC

36. 什么是BFC（块级格式化上下文）？

难度：⭐⭐ 中级
标签：#BFC #概念

问题描述：
请解释BFC（Block Formatting Context）的概念及其特性。

参考答案要点：

定义：BFC是一个独立的渲染区域，内部元素与外部元素互相隔离
特性：
- 内部盒子垂直排列
- 相邻盒子margin会重叠
- BFC区域不会与浮动元素重叠
- 计算高度时包含浮动元素
- BFC内部元素不会影响外部元素

37. 如何触发BFC？

难度：⭐⭐ 中级
标签：#BFC #触发条件

问题描述：
请列举触发BFC的方法。

参考答案要点：以下任一属性可触发BFC：

float: left/right（非none）
position: absolute/fixed（非static/relative）
overflow: hidden/auto/scroll（非visible）
display: inline-block/flex/inline-flex/grid/inline-grid
contain: layout/content/paint

代码示例：

CSS

/* 常用触发BFC的方法 */
.bfc-container {
  overflow: hidden; /* 最常用，副作用最小 */
}

.bfc-container {
  display: flow-root; /* 专门用于创建BFC，无副作用 */
}

38. BFC的应用场景？

难度：⭐⭐ 中级
标签：#BFC #应用

问题描述：
请说明BFC在实际开发中的应用场景。

参考答案要点：

清除浮动：父元素触发BFC可包含浮动子元素
防止margin重叠：将元素放在不同BFC中
防止文字环绕：右侧元素触发BFC
自适应两栏布局：左侧浮动，右侧BFC

代码示例：

CSS

/* 1. 清除浮动 */
.parent {
  overflow: hidden; /* 触发BFC，包含浮动子元素 */
}

/* 2. 防止margin重叠 */
.container {
  overflow: hidden; /* 创建新的BFC */
}

/* 3. 自适应两栏布局 */
.left {
  float: left;
  width: 200px;
}
.right {
  overflow: hidden; /* 触发BFC，不与浮动重叠 */
}

层叠上下文

39. 什么是层叠上下文？

难度：⭐⭐⭐ 高级
标签：#层叠上下文 #z-index

问题描述：
请解释层叠上下文（Stacking Context）的概念及其创建条件。

参考答案要点：

定义：元素在Z轴上的排列顺序，形成三维概念
创建条件：
- 根元素（html）
- position非static + z-index
- opacity小于1
- transform、filter、perspective等属性
- flex/grid子元素 + z-index
- will-change
- isolation: isolate

40. z-index和background的覆盖关系？

难度：⭐⭐⭐ 高级
标签：#层叠上下文 #z-index

问题描述：
请说明层叠上下文中各元素的层叠顺序。

参考答案要点：层叠顺序（从下到上）：

背景和边框
负z-index
块级盒子
浮动盒子
行内/行内块
z-index: 0/auto
正z-index

注意：

z-index只在定位元素（非static）上有效
子元素的z-index不能超过父元素的层叠上下文

预处理器

41. CSS预处理器有什么优势？

难度：⭐⭐ 中级
标签：#预处理器 #Sass #Less

问题描述：
请说明使用CSS预处理器（如Sass、Less）的优势。

参考答案要点：

变量：统一管理颜色、尺寸等
嵌套语法：提高可读性，减少重复选择器
Mixin混合：代码复用，可传参数
函数：数学计算、颜色操作
模块化：@import拆分文件，便于维护
继承：减少重复代码
运算：支持数学运算

42. Sass和Less的区别？

难度：⭐⭐ 中级
标签：#Sass #Less #对比

问题描述：
请对比Sass和Less两种CSS预处理器。

参考答案要点：

特性	Sass	Less
语法	SCSS（类似CSS）/Sass（缩进）	类似CSS
变量符号	$	@
条件语句	支持if/for/while/each	支持guarded mixins
编译	Ruby/Node.js（Dart Sass）	Node.js/浏览器端
社区	更成熟，功能更丰富	更轻量
循环	支持	有限支持

43. Sass中的@mixin和@extend的区别？

难度：⭐⭐⭐ 高级
标签：#Sass #Mixin #Extend

问题描述：
请解释Sass中@mixin和@extend的区别及使用场景。

参考答案要点：

@mixin：包含代码块，可传参数，编译后代码重复但更灵活
@extend：继承选择器，合并样式，编译后代码精简但需注意选择器权重

代码示例：

SCSS

// @mixin - 包含代码块，可传参数
@mixin button($color, $size: 14px) {
  background: $color;
  padding: 10px 20px;
  font-size: $size;
}
.btn-primary { @include button(blue, 16px); }
.btn-secondary { @include button(gray); }

// @extend - 继承选择器，合并样式
.alert { 
  padding: 10px; 
  border-radius: 4px;
}
.error { 
  @extend .alert; 
  color: red; 
  background: #fee;
}
.warning { 
  @extend .alert; 
  color: orange; 
  background: #ffe;
}

CSS架构

命名规范

44. 什么是BEM命名规范？

难度：⭐⭐ 中级
标签：#BEM #命名规范

问题描述：
请解释BEM命名规范及其使用方式。

参考答案要点：

Block（块）：独立的组件，如 .button
Element（元素）：块的组成部分，如 .button__icon
Modifier（修饰符）：块或元素的状态/变体，如 .button--primary

代码示例：

CSS

/* Block */
.card { }

/* Element */
.card__title { }
.card__content { }
.card__image { }

/* Modifier */
.card--highlighted { }
.card--large { }
.card__title--centered { }

/* 完整示例 */
<form class="form form--login">
  <input class="form__input form__input--error" />
  <button class="form__button form__button--primary">登录</button>
</form>

45. OOCSS（面向对象CSS）的核心原则？

难度：⭐⭐⭐ 高级
标签：#OOCSS #架构

问题描述：
请解释OOCSS（Object Oriented CSS）的核心原则。

参考答案要点：

结构与皮肤分离：.structure 和 .skin 分开定义
容器与内容分离：避免使用位置依赖的选择器

代码示例：

CSS

/* 不好 - 结构与皮肤耦合 */
.sidebar .title { 
  font-size: 20px;
  color: blue;
}

/* 好 - 结构 */
.title { font-size: 20px; }

/* 好 - 皮肤 */
.title-blue { color: blue; }
.title-red { color: red; }

/* 不好 - 容器与内容耦合 */
.sidebar .button { padding: 10px; }

/* 好 - 内容独立 */
.button { padding: 10px; }
.button-sidebar { /* 特定变体 */ }

46. SMACSS的五个类别？

难度：⭐⭐⭐ 高级
标签：#SMACSS #架构

问题描述：
请说明SMACSS（Scalable and Modular Architecture for CSS）的五个类别。

参考答案要点：

Base：重置和默认样式（html, body, a, h1-h6等）
Layout：页面大结构（头部、侧边栏、网格系统等）
Module：可复用的组件（按钮、卡片、表单等）
State：状态样式（隐藏、激活、禁用等）
Theme：主题相关样式（颜色、字体等）

模块化方案

47. 如何避免全局样式污染？

难度：⭐⭐ 中级
标签：#模块化 #样式隔离

问题描述：
请介绍避免全局样式污染的几种方法。

参考答案要点：

命名空间：添加前缀，如 .my-component
CSS Modules：自动生成唯一类名
BEM命名规范：结构化命名
CSS-in-JS：样式封装在JavaScript中
Scoped CSS（Vue）：自动添加属性选择器
Shadow DOM：Web Components的样式隔离

48. CSS Modules的工作原理？

难度：⭐⭐⭐ 高级
标签：#CSS Modules #模块化

问题描述：
请解释CSS Modules的工作原理。

参考答案要点：

构建工具（Webpack/Vite）将CSS类名哈希化
生成唯一的类名，如 .primary → .primary_a1b2c3
通过JS对象引用，实现局部作用域
Vue的scoped原理类似，添加data-v-xxx属性

代码示例：

CSS

/* Button.module.css */
.primary { background: blue; }
.large { padding: 20px; }

JAVASCRIPT

// Button.js
import styles from './Button.module.css';

function Button() {
  return <button className={`${styles.primary} ${styles.large}`}>Click</button>;
}
// 编译后: <button class="primary_a1b2c3 large_d4e5f6">

CSS-in-JS方案

49. 什么是CSS-in-JS？有什么优势？

难度：⭐⭐ 中级
标签：#CSS-in-JS #styled-components

问题描述：
请解释CSS-in-JS的概念及其优势。

参考答案要点：

定义：在JavaScript中编写CSS的解决方案
代表库：styled-components、Emotion、Linaria
优势：
- 天然的作用域隔离
- 动态样式（基于props）
- 代码复用（组件化）
- 无需命名冲突
- 便于主题管理
- 支持服务端渲染

50. styled-components和Emotion的区别？

难度：⭐⭐⭐ 高级
标签：#styled-components #Emotion

问题描述：
请对比styled-components和Emotion两种CSS-in-JS方案。

参考答案要点：

特性	styled-components	Emotion
运行时	运行时生成	运行时/编译时
性能	有运行时开销	@emotion/css更轻量
SSR	支持	支持
语法	模板字符串	模板字符串/css prop
包大小	较大（~12KB）	较小（~6KB）
对象样式	不支持原生	支持

51. CSS-in-JS的渲染流程是怎样的？

难度：⭐⭐⭐ 高级
标签：#CSS-in-JS #原理

问题描述：
请描述CSS-in-JS的渲染流程。

参考答案要点：

Plain Text

[组件定义]
    ↓
[模板解析] → 生成哈希类名
    ↓
[React渲染] → createElement()
    ↓
[生成<style>] → 注入到DOM
    ↓
[浏览器解析] → 样式应用

关键点：

运行时生成唯一类名
样式动态注入到<style>标签
可能导致样式闪烁（FOUC）

52. CSS-in-JS vs Utility-First（Tailwind）如何选择？

难度：⭐⭐⭐ 高级
标签：#CSS-in-JS #Tailwind #选择

问题描述：
请说明在什么场景下选择CSS-in-JS，什么场景下选择Tailwind CSS。

参考答案要点：

CSS-in-JS优点：动态能力强，组件化，适合复杂交互
Tailwind优点：无运行时开销，文件体积小，开发速度快
选择建议：
- 需要大量动态样式 → CSS-in-JS
- 追求性能、静态页面多 → Tailwind
- 大型项目、设计系统 → Tailwind + 配置
- 组件库开发 → CSS-in-JS 或 CSS Modules

性能优化

重绘和重排

53. 什么是重排（Reflow）和重绘（Repaint）？

难度：⭐⭐ 中级
标签：#性能 #重排 #重绘

问题描述：
请解释重排（Reflow）和重绘（Repaint）的概念及其关系。

参考答案要点：

重排（Reflow）：元素位置和尺寸变化，需要重新计算布局
重绘（Repaint）：外观变化但不影响布局，如颜色变化
关系：重排一定导致重绘，重绘不一定导致重排
触发重排的属性：width、height、padding、margin、position等
触发重绘的属性：color、background、visibility等

54. 如何减少重排和重绘？

难度：⭐⭐⭐ 高级
标签：#性能 #优化

问题描述：
请介绍减少重排和重绘的方法。

参考答案要点：

CSS方面：

使用transform代替top/left
使用opacity代替visibility
避免table布局
使用will-change

JavaScript方面：

批量读写样式（先读后写）
使用文档碎片批量操作DOM
使用requestAnimationFrame
使用虚拟DOM

代码示例：

CSS

/* CSS优化 */
.element {
  /* 使用transform代替top/left */
  transform: translateX(100px);
  
  /* 使用will-change提示浏览器 */
  will-change: transform;
}

JAVASCRIPT

// JS优化 - 批量读写
const width = element.offsetWidth; // 先读
const height = element.offsetHeight; // 再读
element.style.width = (width + 10) + 'px'; // 后写
element.style.height = (height + 10) + 'px'; // 再写

// 使用文档碎片
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
}
parent.appendChild(fragment);

GPU加速

55. 什么是GPU加速？如何开启？

难度：⭐⭐⭐ 高级
标签：#性能 #GPU加速

问题描述：
请解释GPU加速的概念及其开启方法。

参考答案要点：

GPU加速：使用GPU渲染合成层，减少CPU负担
开启方式：
- transform: translateZ(0) 或 translate3d(0,0,0)
- opacity 属性
- will-change: transform
- filter 属性
注意事项：
- 不要滥用，每个合成层消耗内存
- 动画结束后移除will-change
- 过多合成层反而降低性能

56. 什么是合成层（Composited Layer）？

难度：⭐⭐⭐ 高级
标签：#性能 #合成层

问题描述：
请解释合成层（Composited Layer）的概念。

参考答案要点：

定义：浏览器将某些元素提升到独立的渲染层，由GPU处理
触发条件：3D transform、opacity动画、will-change、fixed定位等
优点：减少重排重绘，提高动画性能
缺点：消耗内存，过多合成层反而降低性能
查看方式：Chrome DevTools → Layers面板

其他优化

57. CSS加载会阻塞渲染吗？

难度：⭐⭐ 中级
标签：#性能 #加载

问题描述：
请解释CSS加载对页面渲染的影响。

参考答案要点：

CSS会阻塞DOM渲染：浏览器需要构建CSSOM后才能渲染
CSS不会阻塞DOM解析：DOM继续解析，但渲染被阻塞
优化建议：
- 将CSS放在head中，尽早加载
- 使用媒体查询减少阻塞
- 关键CSS内联，非关键CSS异步加载
- 使用preload预加载关键CSS

58. link和@import的区别？

难度：⭐⭐ 中级
标签：#性能 #导入

问题描述：
请对比link和@import两种方式引入CSS的区别。

参考答案要点：

特性	link	@import
加载时机	并行加载	页面加载完成后加载
兼容性	所有浏览器	IE5+
使用位置	HTML任何位置	必须在style标签内或CSS文件内
DOM操作	可通过JS操作	不可
性能	更好	可能阻塞渲染

推荐：使用link引入CSS，避免使用@import

Tailwind CSS等原子化CSS

59. 什么是原子化CSS（Atomic CSS）？

难度：⭐⭐ 中级
标签：#原子化CSS #Tailwind

问题描述：
请解释原子化CSS的概念及其核心思想。

参考答案要点：

定义：每个类只做一件事情，如 .p-4（padding: 1rem）
核心概念：
- 单一职责原则
- 高度可复用
- 通过组合构建复杂样式
代表框架：Tailwind CSS、UnoCSS、Tachyons
与传统CSS区别：传统是语义化命名，原子化是功能命名

60. 原子化CSS的优缺点？

难度：⭐⭐ 中级
标签：#原子化CSS #优缺点

问题描述：
请分析原子化CSS的优缺点。

参考答案要点：

优点	缺点
文件体积小（按需生成）	HTML类名冗长
无需命名思考	学习成本高
开发效率高	可读性较差
设计系统一致性	与语义化HTML冲突
缓存友好	复用性受限

61. Tailwind CSS的工作原理？

难度：⭐⭐⭐ 高级
标签：#Tailwind #原理

问题描述：
请解释Tailwind CSS的工作原理。

参考答案要点：

源码扫描：遍历HTML/JSX文件，收集使用的工具类
规则生成：根据类名生成对应CSS规则
优化输出：合并重复规则，压缩选择器
JIT编译：即时编译，只生成使用的样式
PurgeCSS：移除未使用的样式

62. Tailwind CSS 4.0的新特性？

难度：⭐⭐⭐ 高级
标签：#Tailwind #新特性

问题描述：
请介绍Tailwind CSS 4.0的新特性。

参考答案要点：

构建时间从378ms降至100ms
增量构建仅需0.192ms
更好的性能优化
更小的包体积（gzip后约8KB）
改进的JIT引擎
新的配置方式

63. UnoCSS和Tailwind CSS的区别？

难度：⭐⭐⭐ 高级
标签：#UnoCSS #Tailwind #对比

问题描述：
请对比UnoCSS和Tailwind CSS。

参考答案要点：

特性	UnoCSS	Tailwind CSS
定位	引擎	框架
性能	快5倍（无AST解析）	较快
配置	零配置	需要配置
预设	多预设兼容	单一预设
核心工具类	无（通过预设）	内置
包大小	极小	较小

64. UnoCSS的核心优势？

难度：⭐⭐⭐ 高级
标签：#UnoCSS #优势

问题描述：
请介绍UnoCSS的核心优势。

参考答案要点：

极致性能：跳过解析，不使用AST，直接字符串拼接
完全可定制：通过预设系统灵活配置
即时编译：毫秒级热更新
按需生成：仅生成项目中使用的样式
零运行时：纯构建时处理
预设丰富：兼容Tailwind、Windi等预设

CSS新特性

CSS变量

65. 什么是CSS变量（自定义属性）？

难度：⭐ 基础
标签：#CSS变量 #自定义属性

问题描述：
请解释CSS变量（自定义属性）的概念及使用方法。

参考答案要点：

以--开头定义
使用var()函数引用
支持作用域和继承
可在运行时通过JS修改

代码示例：

CSS

/* 定义全局变量 */
:root {
  --main-color: blue;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

/* 定义局部变量 */
.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

/* 使用变量 */
.element {
  color: var(--main-color);
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius);
}

/* 提供默认值 */
.element {
  color: var(--undefined-var, black); /* 使用默认值black */
}

66. CSS变量和Sass变量的区别？

难度：⭐⭐ 中级
标签：#CSS变量 #Sass #对比

问题描述：
请对比CSS变量和Sass变量的区别。

参考答案要点：

特性	CSS变量	Sass变量
运行时	动态，可修改	编译时确定
作用域	DOM作用域	代码作用域
继承	支持继承	不支持
兼容性	现代浏览器	编译后兼容所有浏览器
计算	需配合calc()	直接支持运算
媒体查询	支持	不支持动态变化

容器查询

67. 什么是容器查询（Container Queries）？

难度：⭐⭐⭐ 高级
标签：#容器查询 #响应式

问题描述：
请解释容器查询的概念及其与媒体查询的区别。

参考答案要点：

作用：基于容器大小而非视口大小应用样式
优势：组件级响应式，更灵活的布局控制
与媒体查询区别：媒体查询基于viewport，容器查询基于容器

代码示例：

CSS

/* 定义容器 */
.container {
  container-type: inline-size;
  container-name: sidebar;
}

/* 容器查询 */
@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

/* 命名容器查询 */
@container sidebar (min-width: 400px) {
  .card {
    display: flex;
  }
}

其他新特性

68. @layer规则的作用？

难度：⭐⭐⭐ 高级
标签：#@layer #新特性

问题描述：
请解释@layer规则的作用。

参考答案要点：

作用：控制样式优先级层级
优势：替代!important，更优雅的优先级管理
后声明的层优先级更高

代码示例：

CSS

/* 声明层顺序 */
@layer base, components, utilities;

@layer base {
  body { margin: 0; }
  a { text-decoration: none; }
}

@layer components {
  .btn { padding: 10px; }
  .card { border-radius: 4px; }
}

@layer utilities {
  .text-center { text-align: center; }
  .hidden { display: none; }
}

69. @scope规则的作用？

难度：⭐⭐⭐ 高级
标签：#@scope #新特性

问题描述：
请解释@scope规则的作用。

参考答案要点：

作用：限制样式作用范围
优势：组件级样式隔离，避免全局污染
类似Vue的scoped CSS，但是原生支持

代码示例：

CSS

@scope (.dark-mode) {
  :scope {
    background: #1a1a1a;
    color: white;
  }
  .button {
    background: #333;
    color: white;
  }
  a {
    color: #66b3ff;
  }
}

70. CSS嵌套语法的标准写法？

难度：⭐⭐ 中级
标签：#嵌套 #新特性

问题描述：
请写出CSS嵌套语法的标准写法。

参考答案要点：

CSS原生支持嵌套语法（2023年后）
使用&引用父选择器
支持媒体查询嵌套

代码示例：

CSS

/* 2025标准嵌套语法 */
.article {
  padding: 2rem;
  
  &-header {
    font-size: 1.5rem;
    
    &:hover {
      text-decoration: underline;
    }
  }
  
  &-content {
    line-height: 1.6;
    
    p {
      margin-bottom: 1rem;
    }
  }
  
  @media (width >= 768px) {
    grid-template-columns: 1fr 2fr;
  }
}

附录：复习建议

高频考点速查表

优先级速查

Plain Text

!important > 内联样式 > ID选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器 > 通配符/继承

居中方案速查

方法	代码
Flexbox	`display:flex; justify-content:center; align-items:center;`
绝对定位+transform	`position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);`
Grid	`display:grid; place-items:center;`

触发BFC的方法

CSS

float: left/right;
position: absolute/fixed;
overflow: hidden/auto/scroll;
display: inline-block/flex/grid;

开启GPU加速的方法

CSS

transform: translateZ(0);
transform: translate3d(0, 0, 0);
will-change: transform;
opacity: < 1;

复习建议

1. 基础阶段（1-2周）

重点掌握盒模型、选择器、优先级等基础概念
熟练使用Flexbox和Grid布局
理解文档流、浮动、定位等传统布局方式

2. 进阶阶段（2-3周）

深入理解BFC、层叠上下文等概念
掌握响应式设计和移动端适配方案
学习预处理器（Sass/Less）的使用

3. 高级阶段（持续学习）

理解CSS架构和模块化方案
掌握性能优化技巧
了解CSS-in-JS和原子化CSS
关注CSS新特性发展

重点题目推荐

面试必考题：

盒模型及box-sizing（⭐基础）
Flexbox居中方案（⭐基础）
清除浮动的方法（⭐⭐中级）
BFC的概念和应用（⭐⭐中级）
CSS选择器优先级（⭐⭐中级）
重排和重绘（⭐⭐中级）

加分项：

圣杯布局和双飞翼布局（⭐⭐⭐高级）
CSS-in-JS原理（⭐⭐⭐高级）
容器查询（⭐⭐⭐高级）
CSS动画性能优化（⭐⭐⭐高级）

学习资源推荐

官方文档

MDN CSS文档
CSS-Tricks
Can I Use - 兼容性查询

前端面试题 - CSS篇

📋 文档说明

CSS在前端面试中的重要性

题目统计

难度标识说明

目录

CSS3新特性

Flexbox弹性布局

1. 什么是Flexbox？它适用于什么场景？

2. flex: 1 是什么的简写？

3. 使用Flexbox实现水平垂直居中的方法？

4. Flex容器的主轴和交叉轴是如何定义的？

5. align-content和align-items的区别？

Grid网格布局

6. Flex布局和Grid布局的适用场景有哪些不同？

7. Grid布局中的fr单位是什么？

8. 如何使用Grid实现等高布局？

9. 如何实现瀑布流布局？

动画和过渡

10. transition和animation的区别？

11. 如何实现CSS动画性能优化？

12. CSS动画的最小时间间隔是多少？

13. animation-fill-mode的作用？

变换和滤镜

14. transform有哪些常用函数？

15. 如何使用CSS绘制三角形？

16. 如何实现毛玻璃效果？

布局方案

传统布局

17. 文档流（Normal Flow）是什么？

18. 清除浮动的方案有哪些？

19. position属性的值及其特点？

现代布局

20. 两栏布局：左边固定，右边自适应的实现方案？

21. 圣杯布局和双飞翼布局的区别？

22. 如何实现粘性布局（Sticky）？

响应式设计

23. 什么是响应式设计？基本原理是什么？

24. 媒体查询的使用方法？

移动端适配

25. 移动端适配方案有哪些？

26. rem适配方案的具体实现？

27. vw方案和rem方案如何选择？

28. 如何解决移动端1px边框问题？

选择器和优先级

选择器类型

29. CSS选择器有哪些类型？

30. 伪类和伪元素的区别？

优先级计算

31. CSS选择器优先级如何计算？

32. !important的作用和使用注意事项？

33. 关于伪类LVHA的解释？

盒模型和BFC

盒模型

34. 什么是CSS盒模型？标准盒模型与IE怪异盒模型的区别？

35. box-sizing属性的作用？

BFC

36. 什么是BFC（块级格式化上下文）？

37. 如何触发BFC？

38. BFC的应用场景？

层叠上下文

39. 什么是层叠上下文？

40. z-index和background的覆盖关系？

预处理器

41. CSS预处理器有什么优势？

42. Sass和Less的区别？

43. Sass中的@mixin和@extend的区别？

CSS架构

命名规范

44. 什么是BEM命名规范？

45. OOCSS（面向对象CSS）的核心原则？

46. SMACSS的五个类别？

模块化方案

47. 如何避免全局样式污染？

48. CSS Modules的工作原理？

CSS-in-JS方案

49. 什么是CSS-in-JS？有什么优势？

50. styled-components和Emotion的区别？

51. CSS-in-JS的渲染流程是怎样的？

52. CSS-in-JS vs Utility-First（Tailwind）如何选择？