CSS面试题解析：从基础到进阶的必备知识

一、CSS基础概念与核心机制

1. CSS选择器优先级规则

CSS选择器优先级遵循”从左到右”的权重计算规则，具体为：内联样式（1000）> ID选择器（100）> 类/属性/伪类选择器（10）> 元素/伪元素选择器（1）。当多个选择器作用于同一元素时，浏览器会计算总权重值，数值高者生效。例如：

#nav .active:hover > p::first-line {
  color: red;
}

此选择器优先级为：100（ID） + 10（类） + 10（伪类） + 1（元素） + 1（伪元素） = 132。实际开发中建议避免过度嵌套，保持选择器简洁以提高性能。

2. 盒模型深度解析

盒模型由content、padding、border、margin四部分构成，标准盒模型（content-box）下width仅指内容区宽度，而IE盒模型（border-box）下width包含padding和border。可通过以下代码切换模式：

.box {
  box-sizing: border-box; /* 推荐使用 */
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
  /* 实际占用宽度仍为200px */
}

盒模型计算需注意margin合并现象，垂直方向相邻块级元素的margin会取较大值而非相加，可通过padding或border隔断解决。

二、布局技术实战指南

1. Flexbox布局核心要点

Flexbox通过主轴（main axis）和交叉轴（cross axis）实现灵活布局，关键属性包括：

• display: flex：激活弹性布局
• justify-content：主轴对齐方式（flex-start/center/space-between）
• align-items：交叉轴单行对齐
• flex-wrap：换行控制

典型应用场景：等分列布局

.container {
  display: flex;
  gap: 10px; /* 现代浏览器支持 */
}
.item {
  flex: 1; /* 等分剩余空间 */
}

2. Grid布局进阶技巧

CSS Grid实现二维布局，核心概念包括：

• 显式网格：通过grid-template-columns/rows定义
• 隐式网格：自动生成的轨道
• 单元格合并：grid-column/row-start/end

响应式布局示例：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

此代码可自动填充300px以上宽度的列，不足时换行。

三、动画与过渡实战

1. Transition动画优化

过渡效果需指定属性和时长，推荐组合使用：

.button {
  transition: all 0.3s ease-in-out;
  /* 性能优化：避免使用all，明确指定属性 */
  transition: transform 0.3s, opacity 0.3s;
}
.button:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}

硬件加速优化：对transform和opacity使用可触发GPU加速，提升动画流畅度。

2. Keyframes动画应用

关键帧动画适合复杂路径动画：

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.element {
  animation: slideIn 0.5s forwards;
}

forwards保留动画结束状态，避免闪回。

四、响应式设计核心策略

1. 媒体查询最佳实践

移动优先设计流程：

/* 基础移动端样式 */
.container { width: 100%; }
/* 平板及以上 */
@media (min-width: 768px) {
  .container { width: 750px; }
}
/* 桌面端 */
@media (min-width: 1200px) {
  .container { width: 1170px; }
}

断点选择应基于内容而非设备，使用em单位可避免用户缩放导致的适配问题。

2. 视口单位应用

视口单位（vw/vh）实现全屏布局：

.hero {
  height: 100vh; /* 视口高度 */
  width: 100vw; /* 视口宽度 */
  padding: 2rem;
  box-sizing: border-box;
}

需注意移动端横屏时的高度计算问题，可结合max-width限制。

五、性能优化与兼容处理

1. 重绘与回流优化

批量DOM操作示例：

// 低效方式（多次回流）
element.style.width = '100px';
element.style.height = '100px';
// 高效方式（使用class切换）
element.classList.add('new-style');

CSS优化策略：

• 避免使用expression（IE已废弃）
• 减少复杂选择器嵌套
• 使用will-change属性提前告知浏览器动画属性

2. 浏览器兼容方案

渐进增强实现：

.feature {
  display: grid; /* 现代浏览器 */
  display: flex; /* 降级方案 */
  fallback: block; /* 伪代码，实际需通过JS检测 */
}

实际项目中推荐使用Autoprefixer自动添加厂商前缀，配合@supports特性检测实现优雅降级。

六、面试准备建议

1. 代码实战：使用CodePen或JSFiddle实现常见布局，记录实现思路
2. 原理深究：理解BFC（块级格式化上下文）的形成条件与应用场景
3. 性能分析：掌握Chrome DevTools的Performance面板使用方法
4. 框架基础：了解CSS-in-JS方案（如Styled Components）的基本原理

典型面试题演练：

• 问题：如何实现垂直居中？
  解答：

  /* 方案1：Flexbox */
  .parent { display: flex; align-items: center; justify-content: center; }
  /* 方案2：Grid */
  .parent { display: grid; place-items: center; }
  /* 方案3：绝对定位+transform */
  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

通过系统梳理CSS核心知识点，结合实际开发场景理解原理，开发者可显著提升面试表现。建议每日练习1-2个典型布局，持续积累实战经验。