CSS 是前端面试的核心模块之一，考察重点覆盖基础概念、布局原理、样式优先级、兼容性处理、动画实现等。以下按高频考点分类整理，包含面试题及深度解析，帮助理解底层逻辑而非死记硬背。

一、CSS 基础概念与选择器

1. CSS 有哪些引入方式？各自的优缺点是什么？

CSS 引入方式主要有 4 种，核心区别在于加载时机、作用范围、维护成本：

2. CSS 选择器有哪些分类？请举例说明

选择器是 “找到页面元素并应用样式” 的规则，按功能可分为 6 大类：

3. 选择器的优先级如何计算？!important有什么作用？

选择器优先级决定了 “多个样式规则冲突时，哪条规则生效”，核心是权重计算，遵循 “specificity 规则”：

（1）优先级权重计算

权重按 “等级” 划分，等级越高，优先级越高，公式可简化为：
优先级 = 内联样式（1000） > ID 选择器（100） > 类/伪类/属性选择器（10） > 元素/伪元素选择器（1）

• 示例 1：#header .nav li → 权重 = 100（ID） + 10（类） + 1（元素） = 111
• 示例 2：div.nav::after → 权重 = 1（元素） + 10（类） + 1（伪元素） = 12
• 内联样式（style=""）权重最高（1000），直接覆盖外部样式（除非外部样式加 !important）。

（2）!important的作用与注意事项

• 作用：强制提升单个样式规则的优先级，使其高于所有未加 !important 的规则（即使权重更低）。
  例：.box { color: red !important; } 会覆盖 #header .box { color: blue; }。
• 注意事项：!important 只作用于 “单个样式规则”，而非整个选择器；内联样式加 !important 无法被外部样式覆盖；避免滥用：会破坏优先级逻辑，导致样式难以维护（仅在 “修复第三方样式” 等特殊场景使用）。

4. CSS3 新增了哪些核心特性？

CSS3 是 CSS 的升级标准，核心新增特性按功能分类：

• 选择器：结构伪类（:nth-child()/:last-child）、否定伪类（:not()）、属性选择器（[attr*="value"]）；
• 盒模型与布局：box-sizing（控制盒模型计算方式）、Flex 布局、Grid 布局；
• 视觉效果：圆角（border-radius）、阴影（box-shadow/text-shadow）、渐变（linear-gradient/radial-gradient）、半透明（rgba/opacity）；
• 动画与过渡：transition（平滑过渡）、animation（关键帧动画）、transform（2D/3D 变换）；
• 其他：媒体查询（@media）、弹性盒（Flex）、多列布局（column-count）、自定义属性（--var）。

二、CSS 盒模型

盒模型是 CSS 布局的核心，描述 “元素在页面中占据空间的方式”，是面试必考点。

1. 标准盒模型与怪异盒模型（IE 盒模型）的区别是什么？

两者的核心差异是 **width/height 的计算范围不同 **：

• 示例：一个元素设置 width: 200px; padding: 10px; border: 5px;标准盒模型：元素总宽度 = 200（content） + 102（padding） + 52（border） = 230px；怪异盒模型：元素总宽度 = 200px（已包含 content+padding+border），content 宽度 = 200 - 102 -52 = 170px。

2.box-sizing属性的作用是什么？常用值有哪些？

box-sizing 用于控制盒模型的计算方式，解决 “标准 / 怪异盒模型切换” 问题，是布局中必用属性：

• content-box（默认值）：遵循标准盒模型，width/height 仅包含 content；
• border-box：遵循怪异盒模型，width/height 包含 content + padding + border；
• （较少用）padding-box：width/height 包含 content + padding（多数浏览器不支持）。
• 实践建议：开发中通常全局设置 * { box-sizing: border-box; }，避免计算总宽度时频繁叠加 padding 和 border，减少布局 bug。

3. 什么是margin重叠？如何解决？

（1）定义

当两个或多个元素的垂直 margin（margin-top/margin-bottom）相邻时，会合并为一个 “最大 margin”，而非叠加，这就是 margin 重叠（水平 margin 不会重叠）。

（2）常见场景

1. 相邻兄弟元素：上方元素的 margin-bottom 与下方元素的 margin-top 重叠，取两者最大值；
   例：div1 { margin-bottom: 20px; } div2 { margin-top: 10px; } → 实际间距为 20px。
2. 父元素与第一个 / 最后一个子元素：父元素的 margin-top 与子元素的 margin-top 重叠（或父元素 margin-bottom 与子元素 margin-bottom 重叠）；
   例：父元素无 padding/border，子元素 margin-top: 10px → 父元素会被 “带着” 向下移动 10px，而非子元素在父元素内下移。
3. 空元素：当元素无内容、无 padding/border 时，margin-top 与 margin-bottom 重叠，取最大值。

（3）解决方法

核心思路：破坏 “margin 相邻” 的条件，常用方法：

1. 给父元素添加 padding 或 border（分隔父子元素的 margin）；
2. 给父元素触发 BFC（见下文 “BFC” 考点）；
3. 相邻兄弟元素：用 padding 替代其中一个 margin，或用 Flex/Grid 布局（Flex 容器内的子元素不会发生 margin 重叠）；
4. 空元素：添加内容（如 ）或设置 min-height: 1px。

三、CSS 布局（高频考点）

布局是 CSS 面试的重中之重，需掌握 Flex、Grid（现代布局） 和 浮动、定位（传统布局） 的核心原理与应用场景。

1. Flex 布局（弹性盒）的核心概念与常用属性

Flex 是 “弹性盒布局”，用于快速实现元素的水平 / 垂直居中、均匀分布、自适应排列，是目前最常用的布局方案之一。

（1）核心概念

• Flex 容器：给父元素设置 display: flex 后，父元素成为 Flex 容器；
• Flex 项目：Flex 容器的直接子元素，自动成为 Flex 项目；
• 主轴（main axis）：Flex 项目排列的主要方向（默认水平向右，可通过 flex-direction 修改）；
• 交叉轴（cross axis）：与主轴垂直的方向（默认垂直向下）；
• 主轴起点 / 终点：项目排列的开始 / 结束位置；
• 交叉轴起点 / 终点：项目在交叉轴上的开始 / 结束位置。

（2）Flex 容器的常用属性

（3）Flex 项目的常用属性

（4）经典场景：用 Flex 实现水平垂直居中

.parent {
  display: flex;
  justify-content: center; /* 主轴（水平）居中 */
  align-items: center;     /* 交叉轴（垂直）居中 */
  height: 500px; /* 必须有高度，否则容器会随内容收缩 */
}
.child {
  width: 200px;
  height: 200px;
}

2. Grid 布局（网格布局）的核心概念与应用场景

Grid 是 “网格布局”，用于实现二维布局（同时控制行和列），比 Flex 更灵活，适合复杂布局（如仪表盘、卡片网格）。

（1）核心概念

• Grid 容器：父元素设置 display: grid 后成为 Grid 容器；
• Grid 项目：容器的直接子元素；
• 网格线（Grid Lines）：分隔行 / 列的线（如 3 列有 4 条垂直网格线）；
• 网格轨道（Grid Tracks）：行或列的 “轨道”（即行高 / 列宽）；
• 网格单元格（Grid Cell）：行与列交叉形成的最小单位（如 2 行 2 列有 4 个单元格）；
• 网格区域（Grid Area）：多个单元格合并形成的区域。

（2）Grid 容器的核心属性

（3）经典场景：用 Grid 实现 2 行 3 列的卡片网格

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列，每列平分空间（repeat 表示重复） */
  grid-template-rows: 200px 200px;       /* 2 行，每行高 200px */
  gap: 15px; /* 单元格间距 15px */
  padding: 20px;
}
.card {
  background: #f5f5f5;
  border-radius: 8px;
}

3. 浮动（Float）布局的原理与清除浮动的方法

浮动是早期布局方案（用于实现 “文字环绕图片” 或 “多列布局”），但会导致 “父元素高度塌陷”，需手动清除。

（1）浮动的原理

给元素设置 float: left/right 后，元素会：

1. 脱离 “文档流”（不再占据原来的位置，后续元素会向上移动）；
2. 向指定方向（左 / 右）移动，直到碰到父元素边界或其他浮动元素；
3. 浮动元素的父元素会 “塌陷”（无法感知浮动元素的高度，导致父元素高度为 0）。

（2）清除浮动的 4 种常用方法

清除浮动的核心是 “让父元素感知到浮动元素的高度”，常用方法：

1. 额外标签法：在浮动元素的最后添加一个空标签，设置 clear: both；
   缺点：增加无意义标签，语义化差。

<div class="parent">
  <div class="float-left">浮动元素</div>
  <div style="clear: both;"></div> <!-- 额外空标签 -->
</div>

2. 父元素触发 BFC：给父元素添加 overflow: hidden（或 auto/scroll），触发 BFC 后父元素会包裹浮动元素；
   优点：代码简洁；缺点：若父元素内有超出内容，会被截断（需谨慎使用）。

.parent { overflow: hidden; } /* 触发 BFC，清除浮动 */
.float-left { float: left; }

3. 伪元素清除法（推荐）：给父元素添加 ::after 伪元素，模拟 “额外标签”，不影响语义；
   优点：无额外标签，兼容性好（支持 IE8+）。

.parent::after {
  content: "";       /* 伪元素必须有 content */
  display: block;    /* 转为块级元素 */
  clear: both;       /* 清除左右浮动 */
  visibility: hidden;/* 隐藏伪元素（可选，不影响功能） */
  height: 0;         /* 减少空间占用（可选） */
}
.parent { zoom: 1; } /* 兼容 IE6/7（触发 hasLayout） */

4. 父元素也浮动：给父元素设置 float: left/right，父元素会包裹浮动子元素；
   缺点：父元素也脱离文档流，可能影响后续布局，不推荐。

4. 定位（Position）的 5 个值及其区别

position 用于控制元素的 “定位方式”，决定元素在页面中的位置，5 个值的核心区别是定位基准不同：

• 关键注意点：absolute 元素必须有 “已定位的祖先元素”（通常给父元素设 position: relative），否则会相对于 html 定位，导致布局混乱。

四、BFC 与层叠上下文

BFC 和层叠上下文是 CSS 中较难理解的概念，但对解决 “布局 bug”（如 margin 重叠、浮动塌陷）至关重要。

1. 什么是 BFC？如何触发 BFC？BFC 有哪些应用场景？

（1）定义

BFC（Block Formatting Context，块级格式化上下文）是一个 “独立的渲染区域”，区域内的元素布局不受外部影响，外部元素也不受区域内影响。

（2）触发 BFC 的条件（满足其一即可）

• 根元素（html）；
• 浮动元素（float: left/right，且不为 none）；
• 定位元素（" data-track="269">行内块元素（display: inline-block）；
• 弹性盒容器（display: flex/inline-flex）；
• 网格容器（display: grid/inline-grid）；
• overflow 值为 hidden/auto/scroll（且不为 visible）；
• 表格单元格（display: table-cell）。

（3）BFC 的应用场景

1. 清除浮动：父元素触发 BFC 后，会包裹浮动子元素，解决 “父元素高度塌陷”；
2. 防止 margin 重叠：将两个相邻元素分别放入不同的 BFC 容器中，垂直 margin 不会重叠；
3. 实现自适应两列布局：左侧固定宽度（浮动），右侧触发 BFC（overflow: hidden），右侧会自动适应剩余宽度，且不会被左侧浮动元素覆盖。

2. 什么是层叠上下文？与 BFC 有什么区别？

（1）定义

层叠上下文（Stacking Context）是 “元素在页面 z 轴方向的渲染顺序规则”，决定了 “哪个元素在上方，哪个在下方”（类似 Photoshop 的图层）。

• 层叠顺序（从下到上）：
  背景 / 边框（层叠上下文容器） → 负 z-index 元素 → 文档流非定位元素 → 浮动元素 → 正 z-index 元素。

（2）层叠上下文与 BFC 的区别

五、CSS 动画与过渡

1.transition与animation的区别是什么？

两者均用于实现 “动态效果”，但核心差异在于 “是否需要关键帧” 和 “控制灵活性”：

• 示例 1：transition 实现 hover 变色

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: background 0.3s ease; /* 过渡：背景色，0.3秒，缓动效果 */
}
.box:hover { background: blue; } /* 触发过渡的状态变化 */

• 示例 2：animation 实现循环旋转

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: rotate 2s linear infinite; /* 动画：rotate，2秒，匀速，无限循环 */
}
/* 定义关键帧 */
@keyframes rotate {
  0% { transform: rotate(0deg); }   /* 初始状态：0度 */
  100% { transform: rotate(360deg); }/* 结束状态：360度 */
}

2.transform的常用属性有哪些？transform-origin有什么作用？

transform 用于实现元素的 “2D/3D 变换”（如平移、缩放、旋转），不会影响其他元素的布局（元素仍占据原位置）。

（1）常用transform属性值

（2）transform-origin的作用

• 定义 “transform 变换的中心点”（默认是元素的中心，即 50% 50%）；
• 可设值：关键字：center（中心）、left/right（左右）、top/bottom（上下）；具体值：px 或百分比（如 transform-origin: 0 0 表示左上角为中心点）。
• 示例：transform-origin: top center; rotate(30deg) → 以元素顶部中心为轴旋转 30 度。

六、CSS 兼容性与响应式

1. 如何处理 CSS 浏览器兼容性问题？

浏览器兼容性问题源于 “不同浏览器对 CSS 标准的支持程度不同”（如 IE 不支持 CSS3 特性），常用解决方案：

1. 浏览器前缀（Vendor Prefixes）：
   给非标准 CSS 属性添加浏览器前缀，确保在特定浏览器中生效：Chrome/Safari：-webkit-（如 -webkit-border-radius）；Firefox：-moz-（如 -moz-box-shadow）；IE：-ms-（如 -ms-transform）；Opera：-o-（如 -o-animation）。
   实践建议：使用 Autoprefixer 工具自动添加前缀，无需手动编写。
2. 条件注释（针对 IE）：
   为不同版本的 IE 加载专属 CSS（仅 IE 支持条件注释）：

<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css"> <!-- 仅 IE8 加载 -->
<![endif]-->

3. 特性检测（Feature Detection）：
   使用 Modernizr 等工具检测浏览器是否支持某个 CSS 特性，再针对性处理：

if (Modernizr.borderradius) {
  // 支持 border-radius 的浏览器
  element.style.borderRadius = '8px';
} else {
  // 不支持的浏览器（如 IE8），用背景图模拟圆角
  element.style.background = 'url(rounded-bg.png)';
}

4. 降级方案：
   为不支持的特性提供 “替代方案”，确保功能可用（如用 float 替代 Flex 布局兼容 IE8）。

2. 什么是响应式设计？如何实现响应式布局？

（1）定义

响应式设计（Responsive Web Design）是 “让页面在不同设备（手机、平板、电脑）上自动适配屏幕尺寸” 的设计方案，核心是 “一次开发，多端适配”。

（2）实现响应式布局的 3 个核心要素

1. 设置 viewport 元标签：
   告诉浏览器 “如何解析页面尺寸”，避免移动端页面缩放异常（必须添加）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. width=device-width：页面宽度等于设备屏幕宽度；
3. initial-scale=1.0：初始缩放比例为 1（无缩放）。
4. 媒体查询（@media）：
   根据 “屏幕宽度、设备类型” 等条件，加载不同的 CSS 样式：

/* 默认样式（电脑端） */
.box { width: 25%; }

/* 平板端（屏幕宽度 ≤ 1024px） */
@media (max-width: 1024px) {
  .box { width: 50%; }
}

/* 手机端（屏幕宽度 ≤ 768px） */
@media (max-width: 768px) {
  .box { width: 100%; }
}

5. 弹性单位：
   使用相对单位替代固定单位（如 px），确保元素尺寸随屏幕变化：%：相对于父元素的百分比（如 width: 50%）；rem：相对于根元素（html）的 font-size（如 html { font-size: 16px; }，则 1rem = 16px）；vw/vh：相对于视口宽度 / 高度的百分比（1vw = 视口宽度的 1%，1vh = 视口高度的 1%）。

七、常见易错问题

1.display: none、visibility: hidden、opacity: 0的区别是什么？

2.inline、block、inline-block元素的区别是什么？

3. 如何实现元素的水平垂直居中？（至少 3 种方法）

这是面试高频实践题，需结合不同布局方案回答：

1. Flex 布局（推荐，简单高效）：

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

2. Grid 布局（适合复杂布局）：

.parent {
  display: grid;
  place-items: center; /* 等同于 justify-items: center + align-items: center */
  height: 500px;
}

3. 定位 + 负 margin（需知道子元素尺寸）：

.parent {
  position: relative;
  height: 500px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px; /* 子元素高度的一半（负） */
  margin-left: -100px;/* 子元素宽度的一半（负） */
}

4. 定位 + transform（无需知道子元素尺寸）：

.parent {
  position: relative;
  height: 500px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自身尺寸的 50% 平移 */
}

5. 定位 + transform（无需知道子元素尺寸）：

.parent {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center;     /* 水平居中（子元素需为 inline/inline-block） */
  height: 500px;
  width: 500px;
}
.child {
  display: inline-block; /* 让子元素受 text-align 控制 */
}

总结

CSS 面试题的核心是 “理解底层原理 + 结合实践场景”，需重点掌握：

1. 盒模型、选择器优先级、BFC 等基础概念；
2. Flex/Grid 等现代布局的应用（高频考点）；
3. 浮动清除、水平垂直居中、响应式设计等实践问题；
4. 兼容性处理、动画过渡等进阶知识。

建议结合实际项目练习，将理论转化为解决问题的能力，避免死记硬背。