跳到主要内容

CSS 面试问题

本文整理了一些前端面试中常见的 CSS 问题，涵盖基础语法、选择器与层叠规则、布局、响应式设计、动画与性能，以及实际开发经验等方面。

这些问题并不追求“背答案”，而是帮助你检验自己是否真正理解 CSS 的工作方式。即使你并不打算面试，也可以通过这些问题检验自己对 CSS 的理解深度。

CSS 基础概念​

1. CSS 是什么？它的主要作用是什么？​

答案：CSS（Cascading Style Sheets，层叠样式表）是用于描述 HTML 文档样式的语言。主要作用包括：

  • 控制网页的外观和布局
  • 实现响应式设计
  • 创建动画和交互效果
  • 提高代码的可维护性

2. CSS 和 HTML、JavaScript 分别负责什么？​

答案：

  • HTML：负责内容结构和语义
  • CSS：负责样式和视觉效果
  • JavaScript：负责交互行为和动态功能

三者分离，各司其职，便于维护和协作。

3. 行内元素和块级元素有什么区别？​

答案：

  • 块级元素：独占一行，可以设置宽高，默认宽度 100%
  • 行内元素：不独占一行，不能设置宽高，宽度由内容决定
  • 行内块元素：不独占一行，但可以设置宽高

4. display 常见取值有哪些？分别有什么作用？​

答案：

  • block：块级元素
  • inline：行内元素
  • inline-block：行内块元素
  • flex：弹性布局容器
  • grid：网格布局容器
  • none：隐藏元素，不占据空间

5. display: none 和 visibility: hidden 有什么区别？​

答案：

  • display: none：元素隐藏且不占据空间，不会触发事件
  • visibility: hidden：元素隐藏但仍占据空间，不会触发事件

6. inline、inline-block、block 的差异是什么？​

答案：

  • inline：不独占一行，不能设置宽高
  • inline-block：不独占一行，可以设置宽高
  • block：独占一行，可以设置宽高

7. CSS 注释的写法是什么？是否会影响页面性能？​

答案：

  • 写法：/* 注释内容 */
  • 不会影响页面性能，但会增加文件大小

8. width、height 对哪些元素生效？​

答案：

  • 对块级元素和行内块元素生效
  • 对行内元素不生效（宽度由内容决定）

选择器与优先级​

1. CSS 有哪些常见选择器？​

答案：

  • 基础选择器：元素、类、ID、通用选择器
  • 属性选择器：[attr]、[attr="value"] 等
  • 组合选择器：后代、子、兄弟选择器
  • 伪类：:hover、:focus、:nth-child() 等
  • 伪元素：::before、::after、::first-line 等

2. 类选择器和 ID 选择器的使用场景有什么不同？​

答案：

  • 类选择器：可复用，用于多个元素，优先级较低
  • ID 选择器：唯一性，用于特定元素，优先级较高

推荐优先使用类选择器，ID 选择器主要用于 JavaScript 钩子。

3. 什么是选择器的特异性（Specificity）？​

答案：特异性是浏览器用来决定哪个 CSS 规则应该被应用的机制。当多个规则匹配同一元素时，特异性高的规则会覆盖特异性低的规则。

4. 特异性是如何计算的？​

答案：特异性由四部分组成（从高到低）：

  • 内联样式：1000
  • ID 选择器：100
  • 类/属性/伪类：10
  • 元素/伪元素：1

5. 内联样式、ID、类、元素选择器，哪个优先级更高？​

答案：优先级从高到低：内联样式 > ID > 类 > 元素选择器

6. !important 的作用是什么？​

答案：!important 声明会覆盖所有其他样式规则（除了另一个 !important 规则），无论特异性有多高。

7. 为什么不推荐大量使用 !important？​

答案：

  • 破坏 CSS 的层叠机制
  • 使代码难以维护和调试
  • 增加样式冲突的可能性
  • 应该作为最后的手段

8. 伪类和伪元素有什么区别？​

答案：

  • 伪类：选择处于特定状态的元素（如 :hover）
  • 伪元素：选择元素的特定部分（如 ::before）

9. :hover 和 ::before 分别属于哪一类？​

答案：

  • :hover 是伪类（单冒号，CSS3 前也支持）
  • ::before 是伪元素（双冒号，CSS3 推荐）

10. :nth-child() 和 :nth-of-type() 有什么区别？​

答案：

  • :nth-child()：选择作为父元素第 n 个子元素的元素（不考虑类型）
  • :nth-of-type()：选择同类型元素中的第 n 个

层叠、继承与作用域​

1. 什么是 CSS 的"层叠"（Cascade）？​

答案：层叠是 CSS 名称中的"C"，指当多个样式规则应用到同一元素时，浏览器按照来源优先级、特异性和出现顺序决定使用哪个样式。

2. 哪些属性是可以继承的？​

答案：可继承的属性包括：

  • 文本属性：color、font-family、font-size、line-height、text-align 等
  • 列表属性：list-style、list-style-type 等
  • 其他：cursor、visibility 等

3. 哪些属性默认不可继承？​

答案：不可继承的属性包括：

  • 盒模型：margin、padding、border、width、height
  • 定位：position、top、right、bottom、left
  • 显示：display、float、clear
  • 背景：background-color、background-image

4. inherit、initial、unset 有什么区别？​

答案：

  • inherit：强制继承父元素的值
  • initial：使用属性的初始值（浏览器默认值）
  • unset：如果是可继承属性则继承，否则使用初始值

5. 多个样式规则同时作用于同一元素时，浏览器如何决定最终样式？​

答案：浏览器按照以下顺序决定：

  1. 来源优先级（!important > 作者样式 > 用户样式 > 浏览器默认）
  2. 特异性（特异性高的覆盖低的）
  3. 出现顺序（后出现的覆盖先出现的）

6. @layer 的作用是什么？解决了什么问题？​

答案：@layer 用于定义 CSS 层，可以控制样式的优先级顺序，解决了样式冲突和优先级管理的问题。

盒模型（Box Model）​

1. 什么是 CSS 盒模型？​

答案：CSS 盒模型定义了元素如何占用空间，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。

2. 标准盒模型和怪异盒模型有什么区别？​

答案：

  • 标准盒模型（content-box）：width 和 height 只包括内容区域
  • 替代盒模型（border-box）：width 和 height 包括内容、内边距和边框

3. box-sizing 有哪些常见取值？​

答案：

  • content-box：标准盒模型（默认）
  • border-box：替代盒模型（推荐）

4. content-box 和 border-box 的差异是什么？​

答案：

  • content-box：元素总宽度 = width + padding + border + margin
  • border-box：元素总宽度 = width（已包含 padding 和 border）+ margin

5. margin 是否会影响元素的实际尺寸？​

答案：margin 不会影响元素的实际尺寸（width/height），但会影响元素在页面中占用的总空间。

6. 什么是外边距塌陷（margin collapsing）？​

答案：外边距塌陷是指相邻元素的垂直外边距会合并（取较大值），而不是相加。

7. 哪些情况下会发生外边距塌陷？如何避免？​

答案：

  • 发生情况：相邻元素的垂直 margin、父子元素的垂直 margin
  • 避免方法：使用 padding 代替、使用 Flexbox/Grid、使用 display: inline-block

布局与定位​

1. CSS 中有哪些常见布局方式？​

答案：

  • 文档流布局（默认）
  • 浮动布局（float）
  • 定位布局（position）
  • Flexbox 布局
  • Grid 布局

2. position 有哪些取值？分别是什么意思？​

答案：

  • static：静态定位（默认），正常文档流
  • relative：相对定位，相对于原位置偏移
  • absolute：绝对定位，相对于定位父元素
  • fixed：固定定位，相对于视口
  • sticky：粘性定位，滚动到指定位置后固定

3. relative 和 absolute 的参考坐标系是什么？​

答案：

  • relative：相对于元素原来的位置
  • absolute：相对于最近的定位父元素（position 不为 static），如果没有则相对于 <html>

4. fixed 和 sticky 有什么区别？​

答案：

  • fixed：始终相对于视口定位，滚动时位置不变
  • sticky：滚动到指定位置前表现为 relative，之后表现为 fixed

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

答案：文档流是元素在页面中的默认排列方式，块级元素垂直排列，行内元素水平排列。

6. 浮动（float）的作用是什么？​

答案：浮动让元素脱离文档流，其他元素会围绕浮动元素排列，常用于实现文字环绕效果和传统布局。

7. 为什么浮动元素会导致父元素高度塌陷？​

答案：因为浮动元素脱离文档流，不占据空间，所以父元素无法计算高度，导致高度为 0。

8. 有哪些清除浮动的方法？​

答案：

  • 使用 clear 属性
  • 使用 ::after 伪元素清除
  • 使用 overflow: hidden
  • 使用 Flexbox 或 Grid（推荐）

9. Flexbox 主要解决了什么问题？​

答案：Flexbox 主要解决了：

  • 垂直居中问题
  • 等分布局问题
  • 响应式布局问题
  • 元素对齐问题

10. Grid 布局和 Flexbox 的核心区别是什么？​

答案：

  • Flexbox：一维布局（行或列），适合组件内部布局
  • Grid：二维布局（行和列），适合页面整体布局

Flexbox 与 Grid​

1. Flex 容器和 Flex 项分别是什么？​

答案：

  • Flex 容器：设置了 display: flex 的元素
  • Flex 项：Flex 容器的直接子元素

2. flex-direction 的作用是什么？​

答案：flex-direction 设置主轴的方向，决定 Flex 项的排列方向：

  • row：水平排列（默认）
  • column：垂直排列
  • row-reverse：水平反向
  • column-reverse：垂直反向

3. 主轴和交叉轴分别指什么？​

答案：

  • 主轴：Flex 项排列的主要方向（由 flex-direction 决定）
  • 交叉轴：垂直于主轴的方向

4. justify-content 和 align-items 有什么区别？​

答案：

  • justify-content：控制 Flex 项在主轴上的对齐方式
  • align-items：控制 Flex 项在交叉轴上的对齐方式

5. flex: 1 实际上代表什么？​

答案：flex: 1 是 flex: 1 1 0% 的简写，表示：

  • flex-grow: 1：可以放大
  • flex-shrink: 1：可以缩小
  • flex-basis: 0%：基础大小为 0

实际效果是等分剩余空间。

6. flex-grow、flex-shrink、flex-basis 的作用是什么？​

答案：

  • flex-grow：放大比例，决定如何分配剩余空间
  • flex-shrink：缩小比例，决定如何缩小以适应容器
  • flex-basis：基础大小，在分配空间前的主轴空间

7. Grid 布局的核心概念有哪些？​

答案：

  • 网格容器：设置了 display: grid 的元素
  • 网格项：网格容器的直接子元素
  • 网格线：划分网格的线
  • 网格轨道：两条网格线之间的空间
  • 网格单元格：行和列的交集
  • 网格区域：一个或多个网格单元格

8. grid-template-columns 和 grid-template-rows 的作用是什么？​

答案：

  • grid-template-columns：定义网格的列
  • grid-template-rows：定义网格的行

9. fr 单位的含义是什么？​

答案：fr（fraction）是 Grid 布局中的单位，表示剩余空间的比例。例如 1fr 2fr 表示第一列占 1/3，第二列占 2/3。

10. 什么时候更适合使用 Grid 而不是 Flex？​

答案：

  • Grid：适合二维布局（行和列）、复杂网格系统、页面整体布局
  • Flexbox：适合一维布局（行或列）、组件内部布局、元素对齐

响应式设计​

1. 什么是响应式设计？​

答案：响应式设计是一种网页设计方法，使网页能够适应不同设备和屏幕尺寸，提供一致的用户体验。

2. 什么是移动优先（Mobile First）？​

答案：移动优先是一种设计策略，先为移动设备设计，然后逐步增强以适应更大的屏幕。这样可以确保核心功能在小屏幕上可用。

3. @media 的基本语法是什么？​

答案：

@media media-type and (media-feature) {
  /* CSS 规则 */
}

例如：@media screen and (min-width: 768px) { }

4. min-width 和 max-width 的区别？​

答案：

  • min-width：最小宽度，当屏幕宽度大于等于该值时生效
  • max-width：最大宽度，当屏幕宽度小于等于该值时生效

5. 视口（viewport）是什么？​

答案：视口是用户可见的网页区域。在移动设备上有两个概念：

  • 视觉视口：用户当前看到的区域
  • 布局视口：浏览器用于布局的虚拟视口

6. vw、vh、rem、em 的适用场景有哪些？​

答案：

  • vw、vh：相对于视口，适合全屏布局、响应式宽度
  • rem：相对于根元素，适合字体大小、统一间距
  • em：相对于父元素，适合组件内部相对尺寸

7. 如何让图片在不同屏幕下自适应？​

答案：

img {
  max-width: 100%;
  height: auto;
}

或使用 srcset 和 sizes 属性提供不同尺寸的图片。

8. 什么是断点（breakpoint）？如何设计断点？​

答案：断点是媒体查询中使用的屏幕宽度值，用于在不同屏幕尺寸下应用不同的样式。设计原则：

  • 根据内容决定，而不是固定设备尺寸
  • 移动优先，逐步增强
  • 常用断点：768px（平板）、1024px（桌面）

动画与视觉效果​

1. transition 和 animation 的区别是什么？​

答案：

  • transition：需要触发（如悬停），从一种状态过渡到另一种状态
  • animation：可以自动播放，可以定义多个关键帧，更灵活

2. transition 可以作用于哪些属性？​

答案：transition 可以作用于大多数 CSS 属性，包括：

  • 颜色属性：color、background-color、border-color
  • 尺寸属性：width、height、padding、margin
  • 变换属性：transform、opacity
  • 其他：box-shadow、border-radius 等

3. animation 的基本组成有哪些？​

答案：

  • animation-name：动画名称
  • animation-duration：持续时间
  • animation-timing-function：时间函数
  • animation-delay：延迟时间
  • animation-iteration-count：重复次数
  • animation-direction：播放方向
  • animation-fill-mode：填充模式

4. transform 常见用法有哪些？​

答案：

  • translate()：移动元素
  • scale()：缩放元素
  • rotate()：旋转元素
  • skew()：倾斜元素
  • 可以组合使用：transform: translateX(50px) rotate(45deg) scale(1.2)

5. translate、scale、rotate 的性能表现如何？​

答案：这些 transform 函数性能很好，因为：

  • 使用 GPU 加速
  • 不触发重排（reflow）
  • 只触发重绘（repaint）

6. 为什么通常推荐使用 transform 和 opacity 做动画？​

答案：

  • 性能好：使用 GPU 加速，不触发重排
  • 流畅：60fps 的动画效果
  • 省电：减少 CPU 负担

7. 什么是硬件加速？和 CSS 有什么关系？​

答案：硬件加速是使用 GPU 来处理图形渲染，而不是 CPU。CSS 中：

  • transform 和 opacity 会触发硬件加速
  • 使用 will-change 可以提示浏览器优化
  • 硬件加速可以提升动画性能

性能与工程实践​

1. CSS 会阻塞页面渲染吗？​

答案：是的，CSS 会阻塞页面渲染。浏览器需要等待 CSS 加载和解析完成后才渲染页面，这就是为什么 CSS 通常放在 <head> 中。

2. 为什么 CSS 一般放在 <head> 中？​

答案：

  • 避免 FOUC（Flash of Unstyled Content）
  • 确保样式在内容渲染前加载
  • 提供更好的用户体验

3. 选择器性能是否重要？​

答案：对于现代浏览器，选择器性能影响很小，通常可以忽略。但在极端情况下（大量元素、复杂选择器），可能会有影响。

4. 哪些选择器性能相对较差？​

答案：

  • 过度嵌套的选择器
  • 属性选择器（某些情况下）
  • 通用选择器 *（大量元素时）
  • 但现代浏览器优化很好，影响通常很小

5. 大型项目中如何组织 CSS？​

答案：

  • 按功能模块组织文件
  • 使用 CSS 变量统一管理
  • 使用 BEM 或其他命名规范
  • 使用预处理器或 CSS Modules
  • 建立设计系统

6. BEM 是什么？解决了什么问题？​

答案：BEM（Block Element Modifier）是一种 CSS 命名规范：

  • Block：独立的功能块
  • Element：块的组成部分
  • Modifier：块或元素的状态

解决了样式冲突、可维护性和可读性问题。

7. CSS Modules 和全局 CSS 有什么区别？​

答案：

  • 全局 CSS：样式全局生效，可能造成样式冲突
  • CSS Modules：样式局部作用域，通过类名哈希实现，避免冲突

8. 什么是样式污染？如何避免？​

答案：样式污染是指一个组件的样式意外影响其他组件。避免方法：

  • 使用 CSS Modules
  • 使用 BEM 命名规范
  • 使用作用域隔离
  • 避免全局样式

9. 你如何看待内联样式？​

答案：

  • 优点：优先级高，便于动态修改
  • 缺点：难以维护，不能使用伪类，增加 HTML 体积
  • 建议：只在需要动态样式时使用，优先使用 CSS 类

10. 如何调试复杂的 CSS 布局问题？​

答案：

  • 使用浏览器开发者工具
  • 检查计算样式和盒模型
  • 使用 border 临时标记元素
  • 逐步注释样式定位问题
  • 使用 outline 查看元素边界
  • 检查特异性冲突

综合与开放问题​

1. 你在项目中遇到过最棘手的 CSS 问题是什么？​

参考思路：

  • 描述具体问题（如布局问题、兼容性问题、性能问题）
  • 说明排查过程
  • 介绍解决方案
  • 总结经验和教训

2. 你是如何学习和查阅 CSS 文档的？​

参考思路：

  • 官方文档（MDN、W3C）
  • 实践项目
  • 社区资源（Stack Overflow、CSS-Tricks）
  • 浏览器开发者工具
  • 持续关注新特性

3. 如果一个布局在不同浏览器表现不一致，你会如何排查？​

参考思路：

  1. 使用浏览器开发者工具检查
  2. 检查 CSS 属性支持情况（Can I Use）
  3. 检查是否需要浏览器前缀
  4. 使用 @supports 进行特性检测
  5. 提供降级方案
  6. 在不同浏览器中测试

4. 你如何平衡 CSS 可维护性和灵活性？​

参考思路：

  • 建立设计系统和变量体系
  • 使用命名规范（BEM）
  • 模块化组织代码
  • 文档化和注释
  • 代码审查和重构
  • 在统一性和灵活性之间找到平衡

5. 如果让你重构一个老项目的 CSS，你会从哪里入手？​

参考思路：

  1. 分析现状：了解现有代码结构、问题点
  2. 制定计划：确定重构范围、优先级
  3. 建立规范：命名规范、文件组织、设计系统
  4. 逐步重构：从核心组件开始，逐步扩展
  5. 测试验证：确保功能不受影响
  6. 文档更新：更新开发文档和规范