【面试】高频CSS面试题全解析：从盒子模型到动画实现

回文数不会文
0 阅读8分钟

在前端面试中，CSS 是核心考察模块之一，无论是基础概念还是实战应用，都能体现开发者的技术功底。
本文整理了 10 个高频 CSS 面试题，涵盖盒子模型、选择器、单位、元素隐藏、居中布局、BFC、回流重绘、响应式布局、动画实现、三角形绘制等核心知识点，结合代码示例和应用场景，帮你吃透 CSS 面试考点。

一、说说你对 CSS 盒子模型的理解

1. 核心定义

浏览器渲染页面时，渲染引擎会依据 CSS 盒模型标准，将每个容器划分为四个区域：

  • 内容区域（content）：元素实际内容的显示区域；
  • 内边距区域（padding）：内容与边框之间的空白区域；
  • 边框区域（border）：包裹内边距和内容的边框；
  • 外边距区域（margin）：元素与其他元素之间的空白区域。

image.png

2. 两种核心类型

类型宽度计算规则对应属性
标准盒子模型宽度 = 内容宽度（width = content）box-sizing: content-box;（默认值）
怪异盒子模型
（IE 盒子模型）		宽度 = 内容宽度 + 内边距宽度 + 边框宽度（width = content + padding + border）box-sizing: border-box;

3. "说说/谈谈/聊聊"三步骤--答题模板

  • 是什么：
    在浏览器渲染页面的时候，渲染引擎会根据 css 盒模型的标准来将每一个容器分成内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

  • 特点（特征）：

    • 标准盒子模型：宽度 = 内容宽度 [width = content]
    • 怪异盒子模型（IE 盒子模型）：宽度 = 内容宽度 + 内边距宽度 + 边框宽度 [width = content + padding + border]

  • 应用场景：无【可以不讲】

二、CSS 选择器有哪些？优先级如何？

CSS 选择器是选中页面元素的核心手段，重点回答：谁更有针对性？谁的优先级更高？

1. 基础选择器（优先级从高到低）

  • !important：最高优先级（慎用，会破坏样式层级）；
  • 内联样式：元素上直接写的 style 属性；
  • ID 选择器：#id-name；
  • 类名选择器：.class-name；
  • 元素选择器：div/p 等标签名；
  • 通配符选择器：*（选中所有元素，优先级最低）。

2. 组合选择器

  • 后代选择器：ancestor descendant（选中指定元素的所有后代）；
  • 子选择器：parent > child（仅选中直接子元素）；
  • 相邻兄弟选择器：sibling + sibling（选中紧接在后的同级元素）；
  • 通用兄弟选择器：sibling ~ sibling（选中所有后续同级元素）；
  • 群组选择器：selector1, selector2（同时选中多个选择器匹配的元素）。

3. 特殊选择器

  • 伪类选择器：selector:pseudo-class（选中元素特定状态，如 :hover/:active）；
  • 伪元素选择器：selector::pseudo-element（选中元素特定部分，如 ::before/::after）；
  • 属性选择器：selector[attribute=value]（选中含指定属性/值的元素）。

三、说说 px/em/rem/vw/vh 的区别

核心差异在于「绝对/相对」属性，以及相对的参考对象，该题指向性明确，可以直接回答：

  • px：绝对单位，像素，不依赖任何外部因素，尺寸固定；
  • em：相对单位，参考父元素的字体大小（父元素 font-size:16px 时，1em=16px）；
  • rem：相对单位，参考根元素（<html>）的字体大小，避免 em 的多层嵌套问题；
  • vw：视口宽度单位，1vw = 视口宽度的 1%；
  • vh：视口高度单位，1vh = 视口高度的 1%。

四、css 中，有哪些方式可以隐藏元素，区别是什么？

关键回答：是否占据文档流、是否可触发事件。

方式是否占文档流是否可触发事件
display: none;（不显示）否否
visibility: hidden;（隐藏）是否
opacity: 0;（设置元素透明度为0）是是
transform: scale(0);（将元素缩放为0）是否
clip-path: polygon(0 0, 0 0, 0 0, 0 0);（将元素裁剪为一个面积为0的多边形）是否
position: absolute; top: -9999px; left: -9999px;（将元素定位到不可见区域）否否

五、元素水平垂直居中的方式有哪些？【常考】

1. 已知父元素和子元素的宽高（很low的方法）

/* 父元素 */ 
.parent { overflow: hidden; } 
/* 子元素 */ 
.child {
  margin: 0 auto; 
  margin-top: (父高-子高)/2; 
}

2. 定位 + margin: auto

.parent { position: relative; } 
.child { 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
  margin: auto; 
}

3. 定位 + margin 负值（需知子元素宽高）

.parent { position: relative; }
.child { 
  position: absolute; 
  left: 50%; top: 50%; 
  margin-left: -子宽/2; 
  margin-top: -子高/2; 
}

4. 定位 + 平移（无需知宽高，推荐）

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

5. Flex 弹性布局（最简洁，推荐）

.parent { 
  display: flex; 
  justify-content: center; /* 主轴居中 */ 
  align-items: center; /* 交叉轴居中 */ 
}

6. Grid 网格布局

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

7. Table-cell 表格单元格布局

.parent { 
  display: table-cell; 
  vertical-align: middle; /* 垂直居中 */ 
  text-align: center; /* 水平居中 */ 
} 
.child { display: inline-block; }

六、谈谈你对 BFC 的理解

使用第一题的说说/谈谈/聊聊三步骤答题模板

1. 是什么：

BFC（Block Formatting Context，块级格式化上下文）是 CSS 的一种布局模式，会创建独立的渲染区域，内部元素的布局不会影响外部元素，反之亦然。

2. 特点

  • 计算 BFC 容器高度时，会包含浮动子元素的高度；
  • BFC 容器不会与浮动元素重叠；
  • 内部元素的 margin 不会与外部元素的 margin 重叠。

给父元素添加以下属性之一即可触发 BFC：
overflow: hidden / auto / scroll;
position: absolute / fixed;
float: left / right;
display: flex / grid / inline-block;

3. 应用场景：

  1. 清除浮动（解决父元素高度塌陷）
  2. 防止 margin 重叠
  3. 实现多列布局（避免元素被浮动元素覆盖）。

七、怎么理解回流重绘？（从输入 url 到 页面渲染 的过程）

1. 浏览器渲染流程

  1. 解析 HTML 资源，生成 DOM 树；
  2. 解析 CSS 样式表，生成 CSSOM 树；
  3. 合并 DOM + CSSOM ，生成渲染（RANDER）树；
  4. 计算布局（回流）：确定元素的位置和大小； 【比渲染更耗时】
  5. 绘制页面（重绘）：GPU 渲染元素外观。

2. 回流与重绘的核心区别

  • 回流：元素「几何属性」（宽高、位置、布局）变化时触发，需重新计算布局，性能消耗大；
  • 重绘：元素「外观属性」（颜色、背景、透明度）变化时触发，仅重新绘制外观，性能消耗小。

⚠️ 关键结论：回流一定触发重绘，重绘不一定触发回流。

3. 浏览器优化机制

浏览器会维护「回流优化队列」，将多次回流操作暂存，达到阈值/时间后批量执行，减少性能损耗。但获取以下属性时，会强制清空队列触发即时回流。

  • 导致回流的特例:
    offsetWidth、offsetHeight、...
    clientWidth、clientHeight、...
    scrollWidth、scrollHeight、...

4. 性能优化建议

批量修改元素样式时，先将元素脱离文档流（如 position: absolute），修改完成后再重新插入，减少回流次数。

八、什么是响应式布局？你是怎么在项目中实现响应式布局的？

1. 核心定义

响应式布局指页面根据设备屏幕尺寸自动调整布局和样式，适配手机、平板、PC 等不同设备。

2. 实现方式（多配合使用）

  • 媒体查询（Media Query）：针对不同屏幕尺寸写样式；
@media screen and (min-width: 768px) {
  .box { width: 200px; height: 200px; }
}
  • Flex/Grid 布局：弹性/网格布局天然适配不同尺寸；
  • rem 单位 + 媒体查询：动态修改根元素 font-size，适配不同屏幕；
  • vw/vh/% 单位：基于视口/父元素尺寸的相对单位。

九、css 中常见的实现动画的方式有哪些？

1. 过渡动画（Transition）

适用于「状态切换」的平滑过渡，如 hover 效果：

.box {
  width: 100px; 
  height: 100px; 
  transition: width 1s ease-in-out; 
} 
.box:hover { width: 200px; }

chrome-capture-2026-04-13.gif

2. 自定义动画（Animation）

支持复杂的帧动画，可设置循环、时长、运动曲线：

.box:hover { 
  animation: move 1s linear infinite; 
} 
/* 定义关键帧 */ 
@keyframes move {
  0% { transform: rotate(0); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

Animation.gif

3. 变换动画（Transform）

通过平移、旋转、缩放、倾斜实现动画，无性能损耗（GPU 加速）：

.box:hover {
  transform: rotate(45deg) scale(1.2);
}

Transform.gif

十、CSS 绘制三角形的两种方式

1. 利用 border 属性（最常用）

.box { 
  width: 0; 
  height: 0; 
  /* 只保留一个方向的边框，其余透明 */ 
  border-top: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-bottom: 50px solid red; 
  border-left: 50px solid transparent; 
}

2. 利用 clip-path 裁剪

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  /* 按坐标裁剪出三角形 */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

总结

CSS 面试题看似零散，实则围绕「布局、样式、性能、交互」四大核心展开。
掌握基础概念（盒子模型、选择器、BFC），理解浏览器渲染机制（回流重绘），熟练运用布局技巧（居中、响应式）和动画实现方式，就能从容应对大部分 CSS 面试场景。
建议结合实际代码练习，更好地加深对知识点的理解和记忆哦。

希望本文对你有帮助，我们下期见！🌟

avatar
文章
阅读
粉丝