CSS面试题深度解析：从基础到进阶的全面指南

一、CSS基础概念类面试题

1. 盒模型（Box Model）的组成及计算方式

盒模型是CSS布局的核心概念，由内容区（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。标准盒模型（box-sizing: content-box）的宽度仅包含内容区，而IE盒模型（box-sizing: border-box）的宽度包含内容区、内边距和边框。

代码示例：

.box {
  width: 200px; /* 内容区宽度 */
  padding: 20px;
  border: 10px solid #000;
  box-sizing: content-box; /* 标准盒模型 */
  /* 实际占用宽度 = 200 + 20*2 + 10*2 = 260px */
}

面试要点：需明确两种盒模型的区别，并理解box-sizing属性的全局设置（如* { box-sizing: border-box; }可简化布局计算）。

2. 选择器优先级与继承规则

优先级按权重计算：!important > 内联样式 > ID选择器（100） > 类/属性/伪类选择器（10） > 元素/伪元素选择器（1）。继承的样式（如字体、颜色）优先级低于直接应用的样式。

代码示例：

#header .title { color: red; } /* 优先级110 */
p { color: blue !important; } /* 覆盖所有非!important规则 */

应用建议：避免过度使用!important，优先通过优化选择器结构控制样式。

二、布局与定位类面试题

1. Flexbox与Grid布局的适用场景

• Flexbox：适合一维布局（行或列），如导航栏、卡片对齐。通过justify-content和align-items控制主轴和交叉轴对齐。

  .container {
    display: flex;
    justify-content: space-between;
  }

• Grid布局：适合二维布局（行列同时控制），如复杂表单或图片矩阵。通过grid-template-columns和grid-gap定义网格结构。

  .grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
  }

  对比总结：Flexbox解决“如何排列”问题，Grid解决“如何分布”问题。

2. 定位（Position）属性的区别

• static：默认流式布局，忽略top/right等属性。
• relative：相对自身原位置偏移，保留原空间。
• absolute：相对最近非static父元素定位，脱离文档流。
• fixed：相对视口定位，常用于固定导航栏。
• sticky：滚动时在阈值位置固定（如表格标题）。

代码示例：

.parent { position: relative; }
.child { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  transform: translateX(-50%); /* 水平居中技巧 */
}

三、动画与过渡类面试题

1. transition与animation的区别

• transition：定义状态变化时的过渡效果（如悬停），需触发事件（如:hover）。

  .button {
    transition: background-color 0.3s ease;
  }
  .button:hover { background-color: #ff0; }

• animation：通过@keyframes定义多帧动画，可自动播放或通过JavaScript控制。

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .box { animation: fadeIn 2s infinite; }

  选择依据：简单状态变化用transition，复杂序列动画用animation。

2. 性能优化技巧

• 优先使用transform和opacity实现动画（硬件加速）。
• 避免在动画中使用width/height等会触发重排的属性。
• 使用will-change属性提示浏览器优化（如will-change: transform）。

四、响应式与适配类面试题

1. 媒体查询（Media Queries）的写法

通过@media规则针对不同设备特性应用样式：

@media (max-width: 768px) {
  .sidebar { display: none; }
}
@media (orientation: landscape) {
  .video { width: 100%; }
}

最佳实践：采用移动优先（Mobile First）策略，从小屏幕开始编写样式。

2. 视口单位（Viewport Units）的应用

• vw：视口宽度的1%。
• vh：视口高度的1%。
• vmin/vmax：视口较小/较大维度的1%。

实用场景：

.hero {
  height: 100vh; /* 全屏英雄区域 */
  font-size: 5vw; /* 响应式字体 */
}

五、进阶与实战类面试题

1. CSS变量（Custom Properties）的使用

通过--variable-name定义变量，var()函数调用：

:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

优势：便于主题切换和样式复用，支持JavaScript动态修改。

2. 层叠上下文（Stacking Context）的创建

以下情况会创建新的层叠上下文：

• position为relative/absolute/fixed且z-index非auto。
• opacity小于1。
• transform/filter/perspective属性非none。

问题排查：当z-index失效时，检查是否在同一层叠上下文中。

六、面试应对建议

1. 理论结合实践：回答时不仅说出概念，还需举例说明应用场景。
2. 代码手写能力：面试官可能要求现场编写CSS解决特定问题（如垂直居中）。
3. 性能意识：强调布局重绘（Reflow）与重绘（Repaint）的区别，以及如何减少性能损耗。
4. 浏览器兼容性：提及常用属性的前缀处理（如-webkit-）和渐进增强策略。

通过系统梳理CSS的核心知识点，并结合实际代码示例，开发者能够更自信地应对技术面试，同时提升日常开发中的代码质量与效率。