关于CSS常见的面试题总结

CSS（层叠样式表）作为前端开发的三大核心技术之一，在面试中常被作为重点考察内容。本文将从基础概念到实战应用，系统梳理CSS常见面试题，帮助开发者构建完整的知识体系。

一、CSS布局模型

1. 盒模型（Box Model）

盒模型是CSS布局的基础，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。面试中常考察盒模型计算方式：

.box {
  width: 100px;       /* 内容宽度 */
  padding: 10px;      /* 内边距 */
  border: 5px solid; /* 边框 */
  margin: 20px;       /* 外边距 */
}

标准盒模型下，元素总宽度 = width + padding2 + border2。通过box-sizing: border-box可切换为IE盒模型，此时width包含padding和border。

2. 文档流与定位

• 静态定位（static）：默认布局方式，元素按HTML顺序排列。
• 相对定位（relative）：相对自身原始位置偏移，保留原空间。
• 绝对定位（absolute）：相对最近非static定位的祖先元素定位。
• 固定定位（fixed）：相对视口定位，脱离文档流。
• 粘性定位（sticky）：滚动时在阈值位置固定。

典型面试题：如何实现导航栏滚动时固定在顶部？

.navbar {
  position: sticky;
  top: 0;
}

二、Flexbox与Grid布局

1. Flexbox布局

Flexbox是单维布局方案，适合组件级布局。核心概念：

• 主轴（main axis）：由flex-direction决定方向
• 交叉轴（cross axis）：垂直于主轴的方向

关键属性：

.container {
  display: flex;
  justify-content: center; /* 主轴对齐 */
  align-items: center;     /* 交叉轴对齐 */
  flex-wrap: wrap;         /* 换行处理 */
}

2. CSS Grid布局

Grid是二维布局系统，适合整体页面架构。典型实现：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
  grid-gap: 20px;                        /* 间距 */
}

面试中常对比两者差异：Flexbox适合线性布局，Grid适合复杂二维布局。

三、选择器与优先级

1. 选择器类型

• 基础选择器：*、element、.class、#id
• 组合选择器：div p（后代）、div > p（子元素）、div + p（相邻兄弟）
• 属性选择器：[type="text"]、[class^="btn-"]
• 伪类选择器：:hover、:nth-child(n)
• 伪元素选择器：::before、::after

2. 优先级计算

优先级按权重排序：!important > 内联样式 > ID选择器 > 类/属性/伪类 > 元素/伪元素。计算规则：

• ID选择器：100
• 类/属性/伪类：10
• 元素/伪元素：1

示例：

#nav .item a:hover {} /* 100 + 10 + 1 + 10 = 121 */

四、动画与过渡

1. CSS过渡（Transition）

实现属性变化时的平滑动画：

.button {
  transition: all 0.3s ease;
}
.button:hover {
  background: #ff0000;
  transform: scale(1.1);
}

2. CSS动画（Animation）

通过@keyframes定义关键帧动画：

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

五、响应式设计

1. 媒体查询（Media Queries）

根据设备特性应用不同样式：

@media (max-width: 768px) {
  .sidebar { display: none; }
}

2. 视口单位

使用vw、vh、vmin、vmax实现相对布局：

.header {
  height: 10vh; /* 视口高度的10% */
  font-size: 5vw; /* 视口宽度的5% */
}

六、性能优化

1. 减少重绘与回流

• 避免频繁修改width、height、margin等触发回流的属性
• 使用transform和opacity实现动画（不触发回流）
• 批量修改DOM样式（通过class切换而非逐个属性修改）

2. CSS预处理器

Sass/Less等预处理器通过变量、嵌套、混合等功能提升开发效率：

$primary-color: #3498db;
.button {
  background: $primary-color;
  &:hover { opacity: 0.8; }
}

七、实战案例分析

问题：如何实现水平垂直居中？
解决方案：

1. Flexbox方案：

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

2. Grid方案：

   .parent {
   display: grid;
   place-items: center;
   }

3. 绝对定位方案：

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

八、学习建议

1. 动手实践：通过CodePen、JSFiddle等平台实时验证代码
2. 阅读规范：深入理解W3C CSS规范
3. 分析源码：研究开源项目的CSS架构
4. 性能测试：使用Chrome DevTools分析渲染性能

CSS技术体系庞大且持续演进，掌握核心概念的同时需关注新兴特性如CSS Houdini、Container Queries等。本文总结的面试题覆盖了80%的常见考察点，建议结合实际项目加深理解。