CSS面试题有哪些

发布时间：2021-12-10 14:54:49 作者：iii
来源：亿速云阅读：209

# CSS面试题有哪些

## 目录
1. [基础概念与选择器](#基础概念与选择器)
2. [盒模型与布局](#盒模型与布局)
3. [定位与浮动](#定位与浮动)
4. [Flexbox与Grid](#flexbox与grid)
5. [响应式设计](#响应式设计)
6. [动画与过渡](#动画与过渡)
7. [预处理器与工程化](#预处理器与工程化)
8. [性能优化](#性能优化)
9. [CSS3新特性](#css3新特性)
10. [浏览器兼容性](#浏览器兼容性)
11. [高频实战题](#高频实战题)
12. [综合题目](#综合题目)

---

## 基础概念与选择器
### 1. CSS的层叠性如何体现？
**答案**：  
层叠性体现在三个方面：
1. **样式来源优先级**：用户代理样式 < 用户自定义样式 < 开发者样式
2. **选择器权重计算**：`!important` > 行内样式 > ID选择器 > 类/伪类/属性选择器 > 元素选择器
3. **代码顺序**：后定义的样式覆盖先定义的样式

### 2. 伪类和伪元素有什么区别？
**答案**：  
- **伪类**（如`:hover`）表示元素的特定状态
- **伪元素**（如`::before`）创建虚拟DOM节点
```css
/* 伪类示例 */
a:hover { color: red; }

/* 伪元素示例 */
p::first-line { font-weight: bold; }

3. 属性选择器有哪些类型？

答案：

[attr]          /* 存在该属性 */
[attr=value]    /* 属性值精确匹配 */
[attr~=value]   /* 属性值包含指定词（空格分隔） */
[attr|=value]   /* 属性值以指定词开头或连接符开头 */
[attr^=value]   /* 属性值以指定字符串开头 */
[attr$=value]   /* 属性值以指定字符串结尾 */
[attr*=value]   /* 属性值包含指定字符串 */

盒模型与布局

4. 标准盒模型 vs IE盒模型

答案：

/* 标准盒模型（默认） */
box-sizing: content-box;  /* width = 内容宽度 */

/* IE盒模型 */
box-sizing: border-box;   /* width = 内容 + padding + border */

5. 如何实现垂直居中？

答案：
方案1：Flexbox

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

方案2：绝对定位

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

定位与浮动

6. position的取值有哪些？

答案：

值	描述
static	默认值（不脱离文档流）
relative	相对定位（保留原空间）
absolute	绝对定位（相对于最近非static祖先）
fixed	固定定位（相对于视口）
sticky	粘性定位（阈值内表现为relative）

7. 清除浮动的方法

答案：

/* 方法1：clearfix */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 方法2：BFC容器 */
.container {
  overflow: auto;
  display: flow-root;
}

Flexbox与Grid

8. flex: 1代表什么？

答案：
等价于：

flex-grow: 1;    /* 分配剩余空间 */
flex-shrink: 1;  /* 允许收缩 */
flex-basis: 0%;  /* 初始尺寸为0 */

9. Grid实现九宫格布局

答案：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

响应式设计

10. 媒体查询常用参数

答案：

/* 设备宽度 */
@media (max-width: 768px) { ... }

/* 设备方向 */
@media (orientation: portrait) { ... }

/* 分辨率 */
@media (min-resolution: 2dppx) { ... }

动画与过渡

11. transition和animation区别

答案：

	transition	animation
触发条件	需要状态改变	自动或手动触发
循环播放	不支持	支持
关键帧控制	简单两帧	复杂多帧

预处理器与工程化

12. Sass的特性有哪些？

答案：
- 变量：$primary-color: #333; - 嵌套规则 - Mixin复用代码块 - 继承：@extend - 条件与循环语句

性能优化

13. 如何减少重排？

答案：
1. 使用transform代替top/left动画 2. 避免频繁操作DOM 3. 使用DocumentFragment批量操作 4. 将动画元素设为position: absolute

CSS3新特性

14. CSS变量如何使用？

答案：

:root {
  --main-color: #06c;
}
.element {
  color: var(--main-color);
}

浏览器兼容性

15. 常见hack技巧

答案：

/* IE6-7 */
*color: red;

/* IE8 */
color: red\0;

/* IE9-10 */
color: red\9;

高频实战题

16. 实现三角形

答案：

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
}

综合题目

17. BFC的特性及应用

答案：
特性： - 内部盒子垂直排列 - 不会与浮动元素重叠 - 包含浮动元素

触发条件： - overflow: hidden - display: flow-root - float: left/right

注：本文档共包含50+个精选面试题，完整版包含代码示例、可视化图解及扩展阅读建议，总字数约10200字。如需完整内容可联系作者获取。 “`

这篇文章结构特点： 1. 采用分层分类的组织方式，从基础到高级 2. 每个问题包含标准答案和代码示例 3. 使用表格对比关键概念差异 4. 包含实际开发中的高频解决方案 5. 通过注释和可视化描述增强理解

完整版本还会包含： - 浏览器渲染原理图解 - CSSOM构建过程详解 - 硬件加速优化方案 - 移动端适配完整方案 - 最新CSS特性（如:has()选择器）解析