前端面试中，CSS 这些高频问题你必须会！

准备面试的前端小伙伴们，CSS 作为页面的 "化妆师"，一直是面试官重点考察的内容。今天整理了几个高频 CSS 面试题，附带清晰解答，帮你轻松应对面试～

一、CSS 动画有哪些？怎么实现？

面试官问动画，可不是让你列举 "旋转、平移" 这些效果，而是想知道底层实现方式。常见的有三种：

transition（过渡动画）：给元素加 "状态切换的动画缓冲"。比如鼠标 hover 时，让颜色从红慢慢变蓝，而不是瞬间切换。

用法：transition: 属性时长 timing-function;

例：div { transition: background 0.3s ease; } 鼠标移上去，背景色会用 0.3 秒慢慢变化。
transform（变换动画）：改变元素的形态或位置，比如缩放、旋转、平移。注意哦，它本身不带动画效果，得配合 transition 或 animation 才有 "动起来" 的感觉。

例：transform: rotate(30deg) scale(1.2); 元素会旋转 30 度并放大 1.2 倍。
animation（自定义动画） ：最灵活的动画方式，能定义多关键帧、循环次数等。需要先用@keyframes定义动画过程，再用 animation 调用。

例：

css 复制代码

@keyframes move {
  0% { left: 0; }
  50% { left: 200px; }
  100% { left: 0; }
}
.box { animation: move 2s infinite; }

这个盒子会左右来回移动，停不下来～

这俩是浏览器渲染页面的 "幕后工作"，直接影响性能，必须搞懂。

先说说从输入 URL 到页面显示的全过程（简化版）：

回流一定会触发重绘，但重绘不一定触发回流（比如只改背景色，不影响元素大小位置）。
哪些操作会触发回流？
- 刷新页面、调整浏览器窗口大小；
- 元素的宽高、margin、padding 变化；
- 增删可见的 DOM 元素（隐藏的不算，因为不在渲染树里）。
浏览器的小优化 ：它会把多次回流操作放进 "队列"，攒到一定程度一次性处理，减少性能消耗。但有些属性会强制清空队列，比如offsetWidth、scrollTop，用的时候要注意哦。
怎么减少回流？

这是经典 "手写题"，面试官可能直接让你现场写。两种思路：

css 复制代码

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: red; /* 朝下的红色三角形 */
}

原理：当宽高为 0 时，四个边框会变成四个三角形，把其他三个设为透明，剩下的就是你要的三角形～

简单说，就是让页面在手机、平板、电脑上都好看。实现方式有这些：

媒体查询（@media）：给不同屏幕尺寸写不同样式。

例：@media (max-width: 768px) { .box { width: 100%; } } 屏幕小于 768px 时，盒子占满宽度。
百分比：元素宽高用百分比，随父容器大小变化。
vw/vh：1vw = 屏幕宽度的 1%，1vh = 屏幕高度的 1%，直接跟屏幕尺寸挂钩。
rem + 媒体查询：给 html 设不同 font-size，元素用 rem 单位，配合媒体查询在不同屏幕下切换 font-size。

正常情况下，浏览器会把小于 1px 的线渲染成 1px（因为屏幕像素限制）。解决办法：

css 复制代码

.line {
  height: 1px;
  transform: scaleY(0.5); /* 垂直方向缩放到0.5倍 */
}

现代浏览器大多支持直接写font-size: 10px，但老浏览器可能强制最小 12px。可以用：

css 复制代码

.small-text {
  font-size: 12px;
  zoom: 0.8; /* 整体缩小到80%，文字也会变小 */
}

就是增强版 CSS，让写样式更高效。比如支持变量、函数、继承，方便维护。常见的有：