前端开发CSS布局常见问题解析与实用解决方案分享

在前端开发中，CSS布局一直是开发者必须掌握的核心技能。尽管Flexbox和Grid等现代布局技术已经极大简化了开发流程，但在实际项目中，我们仍会遇到各种棘手的布局问题。本文将深入解析前端开发中常见的CSS布局问题，并提供实用的解决方案和代码示例，帮助开发者高效应对各种布局挑战。

1. 垂直居中问题

垂直居中是CSS布局中最经典且最常见的问题之一。在Flexbox和Grid出现之前，开发者通常使用position: absolute配合transform或line-height等技巧实现。现在，我们有了更简洁的现代解决方案。

问题描述

如何将一个元素在其父容器中垂直居中？例如，将一个按钮在卡片中垂直居中。

解决方案

现代方案：Flexbox

Flexbox是实现垂直居中的首选方案，代码简洁且兼容性良好。

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 200px; /* 父容器需要有高度 */
}

.centered-element {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border-radius: 4px;
}

<div class="container">
  <div class="centered-element">垂直居中内容</div>
</div>

传统方案：绝对定位 + Transform

如果需要支持旧版浏览器或特殊场景，可以使用绝对定位方案。

.parent {
  position: relative;
  height: 300px;
  border: 1px solid #ccc;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2196F3;
  color: white;
  padding: 15px;
}

实际应用场景

在实际项目中，垂直居中常用于模态框、弹窗、卡片内容居中等场景。例如，一个登录弹窗需要在屏幕中央显示：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
}

2. 响应式图片布局问题

响应式图片是现代网页的基本要求，但开发者常遇到图片变形、尺寸不匹配或加载性能问题。

问题描述

如何确保图片在不同屏幕尺寸下保持比例且不超出容器？如何优化图片加载性能？

解决方案

基础响应式方案

使用max-width和height: auto确保图片不会超出容器且保持比例。

.responsive-image {
  max-width: 100%;
  height: auto;
  display: block; /* 移除图片底部间隙 */
}

<div class="card">
  <img src="image.jpg" alt="响应式图片" class="responsive-image">
  <div class="card-body">图片描述</div>
</div>

高级方案：使用`object-fit`

当容器尺寸固定但图片比例不匹配时，object-fit属性可以完美解决。

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例并覆盖容器，可能裁剪 */
  /* 或者使用 object-fit: contain; 保持完整显示，可能留白 */
}

性能优化：响应式图片与WebP格式

使用<picture>元素提供多种格式和尺寸的图片：

<picture>
  <!-- 优先使用WebP格式 -->
  <source srcset="image.webp" type="image/webp">
  <!-- 备用JPEG格式 -->
  <source srcset="image.jpg" type="image/jpeg">
  <!-- 最终回退方案 -->
  <img src="image.jpg" alt="描述性文本" class="responsive-image">
</picture>

实际应用场景

在电商网站的商品列表中，每个商品卡片包含固定尺寸的图片容器：

.product-card {
  width: 250px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background-color: #f5f5f5;
}

.product-info {
  padding: 12px;
}

3. 多列布局中的等高问题

在多列布局中，我们经常希望各列高度相等，即使内容长度不同。这是传统布局的一大挑战。

问题描述

如何在三列布局中，使各列背景色或边框在视觉上高度一致，即使内容长度不同？

解方案

方案一：Flexbox（推荐）

Flexbox天然支持等高列，因为flex item默认会拉伸到flex container的高度。

.row {
  display: flex;
  gap: 20px; /* 列间距 */
  margin-bottom: 20px;
}

.column {
  flex: 1; /* 等分宽度 */
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 20px;
}

<div class="row">
  <div class="column">
    <h3>短内容</h3>
    <p>只有几行文字。</p>
  </div>
  <div class="column">
    <h3>长内容</h3>
    <p>很多文字...</p>
    <p>更多文字...</p>
    <p>甚至更多...</p>
 等高列示例
  </div>
  <div class="column">
    <h3>中等内容</h3>
    <p>中等长度的文字。</p>
  </div>
</div>

方案二：CSS Grid

Grid布局也能轻松实现等高列，且控制更精细。

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

.grid-column {
  background-color: #e3f2fd;
  border: 1等高列示例
  border-radius: 4px;
  padding: 20px;
  /* Grid item默认不会拉伸，但可以通过align-items: stretch实现 */
}

方案三：Table布局（传统方案）

虽然不推荐，但在某些特殊场景下table布局仍有用武之地。

.table-layout {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.table-column {
  display: table-cell;
  width: 33.33%;
  padding: 20px;
  border: 1px solid #ccc;
  vertical-align: top;
}

实际应用场景

在博客或新闻网站的首页，经常需要三列布局展示不同类别的文章，各列背景色需要等高：

.featured-section {
  display: flex;
  gap: 15px;
  padding: 20px;
  background-color: #f0f0f0;
}

.category-column {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.category-column h3 {
  border-bottom: 2px solid #007bff;
  padding-bottom: 8px;
  margin-top: 0;
}

4. 文本溢出与省略号处理

文本溢出是移动端和响应式设计中常见的问题，特别是卡片、表格等空间有限的场景。

问题描述

如何在固定宽度的容器中，当文本过长时显示省略号（…）？如何实现多行文本溢出显示省略号？

解决方案

单行文本溢出

使用CSS的text-overflow: ellipsis属性组合。

.single-line-ellipsis {
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  width: 200px; /* 必须指定宽度 */
  background-color: #f0f0f0;
  padding: 8px;
}

多行文本溢出

多行省略需要使用-webkit-line-clamp属性，虽然带浏览器前缀，但兼容性良好。

.multi-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示3行 */
  -webkit-box-orient: vertical;
  line-height: 1.5;
  max-height: 4.5em; /* 3 * 1.5 = 4.5em，可选但推荐 */
}

动态省略与工具提示

结合JavaScript和CSS，提供更好的用户体验。

.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  background-color: #333;
  color: white;
  text-align: left;
  border-radius: 4px;
  padding: 8px 12px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: normal;
  width: 200px;
  transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

实际应用场景

在新闻列表或产品卡片中，标题可能很长，需要限制显示行数：

<div class="news-card">
  <h3 class="multi-line-ellipsis">这是一个非常长的新闻标题，可能会占用多行空间，需要限制显示行数并显示省略号</h3>
  <p>新闻摘要内容...</p>
  <div class="tooltip-container">
    <span class="single-line-ellipsis" style="width: 150px;">长作者名</span>
    <span class="tooltip-text">完整作者名：这是一个非常长的作者名字需要显示完整信息</span>
  </div>
</div>

5. 移动端100vh高度问题

在移动端浏览器中，100vh包含地址栏和工具栏，导致实际可视区域小于预期，这是移动端开发的一个常见陷阱。

问题描述

使用height: 100vh时，在iOS Safari等浏览器中，当地址栏显示时，元素高度会超出可视区域；当地址栏隐藏时，又会出现空白。

解决方案

方案一：使用`-webkit-fill-available`（推荐）

.fullscreen-element {
  height: 100vh; /* 回退方案 */
  height: -webkit-fill-available; /* iOS Safari专用 */
}

方案二：使用CSS变量 + JavaScript动态计算

通过JavaScript监听视口变化，动态设置CSS变量。

:root {
  --vh: 1vh;
}

.fullscreen-element {
  height: calc(var(--vh, 1vh) * 100);
}

// 在页面加载和窗口大小变化时更新
function setViewportHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', setViewportHeight);
window.addEventListener('load', setViewportHeight);

方案三：使用`svh`、`lvh`、`dvh`单位（现代方案）

现代浏览器开始支持新的视口单位：

svh (small viewport height): 最小视口高度（地址栏显示时）
lvh (large viewport height): 最大视口高度（地址栏隐藏时）
dvh (dynamic viewport height): 动态视口高度，随地址栏变化

.fullscreen-element {
  height: 100vh; /* 回退方案 */
  height: 100dvh; /* 现代浏览器推荐 */
}

实际应用场景

移动端全屏弹窗或全屏背景：

.mobile-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 回退 */
  height: 100dvh; /* 现代浏览器 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

6. 浮动布局的清除问题

虽然Flexbox和Grid已经取代了浮动布局，但在维护旧项目或某些特殊场景（如文字环绕图片）中，浮动仍然有用。浮动带来的最大问题是父容器高度塌陷。

问题描述

当子元素全部浮动时，父容器高度变为0，导致背景色、边框等样式无法正确显示。

解决方案

方案一：使用Clearfix（经典方案）

.clearfix::after {
  content: "";
  display: layout;
  clear: both;
}

方案二：使用Flexbox替代（推荐）

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.floated-item {
  float: none; /* 取消浮动 */
  /* 使用Flexbox控制布局 */
}

方案三：使用`overflow`属性

.container {
  overflow: auto; /* 或 hidden */
  /* 但可能隐藏溢出内容 */
}

实际应用场景

在维护旧项目时，可能需要处理浮动布局：

.old-style-grid {
  width: 100%;
  overflow: hidden; /* Clearfix hack */
}

.old-style-grid > div {
  float: left;
  width: 30%;
  margin: 1.5%;
  background: #f0f0f0;
  padding: 15px;
}

7. Z-index层级管理问题

Z-index管理不当会导致页面层级混乱，特别是在动态内容、模态框、下拉菜单等场景中。

问题描述

为什么设置了z-index: 9999的元素仍然被其他元素遮挡？如何科学管理z-index？

解决方案

原理理解

Z-index只在定位元素（position不为static）上生效，且受父元素层级限制（层叠上下文）。

方案一：建立Z-index变量系统

:root {
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
}

方案二：避免创建过多层叠上下文

/* 避免这样做 */
.element {
  position: relative;
  z-index: 1; /* 不必要的层叠上下文 */
  opacity: 0.9; /* 也会创建层叠上下文 */
  transform: translateZ(0); /* 也会创建层叠上下文 */
}

/* 推荐做法 */
.element {
  /* 只在需要时创建层叠上下文 */
}

方案三：使用CSS自定义属性管理

.modal-overlay {
  position: fixed;
  z-index: var(--z-modal);
}

.modal-content {
  position: relative;
  z-index: calc(var(--z-modal) + 1);
}

.toast {
  position: fixed;
  z-index: var(--z-toast);
}

实际应用场景

在复杂的单页应用中，管理各种浮动元素：

/* 全局Z-index配置 */
:root {
  --z-header: 1000;
  --z-sidebar: 900;
  --z-fab: 800;
  --z-dropdown: 700;
  --z-modal: 600;
  --z-overlay: 500;
}

.header {
  position: sticky;
  z-index: var(--z-header);
}

.fab-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-fab);
}

.dropdown-menu {
  position: absolute;
  z-index: var(--z-dropdown);
}

8. 响应式断点管理问题

随着设备尺寸多样化，如何科学管理响应式断点成为重要问题。硬编码断点会导致维护困难。

问题描述

如何避免在媒体查询中重复编写相同的断点？如何使断点更易于维护？

解决方案

方案一：使用CSS自定义属性定义断点

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (min-width: var(--bp-md)) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: var(--bp-lg)) {
  .container {
    max-width: 960px;
  }
}

方案二：使用Sass/Less预处理器

// Sass示例
$breakpoints: (
  'sm': 640px,
  'md': 768px,
  'lg': 1024px,
  'xl': 1280px
);

@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

.container {
  padding: 10px;
  
  @include respond-to('md') {
    padding: 20px;
  }
  
  @include respond-to('lg') {
    padding: 30px;
  }
}

方案三：使用CSS容器查询（现代方案）

.container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card-content {
    display: flex;
    gap: 10px;
  }
}

实际应用场景

在组件库开发中，统一管理断点：

/* 在组件库的全局样式中 */
:root {
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
}

/* 组件内部使用 */
.button-group {
  display: flex;
  flex-direction: column;
}

@media (min-width: var(--breakpoint-md)) {
  .button-group {
    flex-direction: 8px;
  }
}

9. 自定义滚动条样式问题

不同浏览器的默认滚动条样式差异很大，统一滚动条样式是提升用户体验的重要细节。

问题描述

如何在Webkit浏览器（Chrome、Safari）和Firefox中统一自定义滚动条样式？

解决方案

Webkit浏览器（Chrome、Safari、Edge）

/* 基础样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 滚动条轨道 */
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

/* 滚动条滑块 */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* 滑块悬停效果 */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 滚动条角落 */
.custom-scrollbar::-webkit-scrollbar-corner {
  background: #f1f1f1;
}

Firefox浏览器

.custom-scrollbar {
  scrollbar-width: thin; /* auto, thin, none */
  scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

综合方案

/* 全局滚动条样式 */
:root {
  --scrollbar-width: 8px;
  --scrollbar-thumb: #888;
  --scrollbar-track: #f1f1f1;
}

/* Webkit浏览器 */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Firefox */
body {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

实际应用场景

在长列表或代码编辑器中，需要美观的滚动条：

.code-editor {
  height: 400px;
  overflow: auto;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 15px;
  font-family: 'Consolas', 'Monaco', monospace;
}

.code-editor::-webkit-scrollbar {
  width: 12px;
}

.code-editor::-webkit-scrollbar-track {
  background: #2d2d2d;
}

.code-editor::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 6px;
  border: 2px solid #2d2d2d;
}

.code-editor::-webkit-scrollbar-thumb:hover {
  background: #505050;
}

10. CSS性能优化问题

CSS性能问题往往被忽视，但不当的CSS选择器和属性会影响页面渲染性能。

问题描述

如何优化CSS选择器？如何避免强制同步布局（Layout Thrashing）？如何减少重绘和回流？

解决方案

1. 优化选择器性能

/* 避免：过于具体的选择器 */
body div.container > div.row > div.col > p.text {
  color: #333;
}

/* 推荐：简洁的选择器 */
.text {
  color: #333;
}

/* 避免：通用选择器和属性选择器滥用 */
* {
  box-sizing: border-box;
}

/* 推荐：在必要时使用 */
.container * {
  box-sizing: border-box;
}

2. 避免强制同步布局

// 错误示例：读写交替导致强制同步布局
function badExample() {
  const elements = document.querySelectorAll('.item');
  for (let i = 0; 1 < elements.length; i++) {
    // 读
    const width = elements[i].offsetWidth;
    // 写
    elements[i].style.width = (width + 10) + 'px';
    // 下一次循环又读，导致强制同步布局
  }
}

// 正确示例：先读后写
function goodExample() {
  const elements = document.querySelectorAll('.item');
  const widths = [];
  
  // 先读
  for (let i = 0; i < elements.length; i++) {
    widths.push(elements[i].offsetWidth);
  }
  
  // 后写
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.width = (widths[i] + 10) + 'px';
  }
}

3. 使用CSS Containment

/* 告诉浏览器该元素内部变化不影响外部布局 */
.isolated-section {
  contain: layout style paint;
}

/* 只包含样式变化 */
.simple-change {
  contain: style;
}

4. 使用`will-change`优化动画

/* 只在需要时启用 */
.animated-element {
  transition: transform 0.3s ease;
}

.animated-element:hover {
  transform: translateY(-5px);
  will-change: transform; /* 提示浏览器准备GPU加速 */
}

5. 避免不必要的重绘

/* 避免：改变布局属性触发重绘 */
.layout-trigger {
  width: 100px; /* 改变布局 */
  margin: 10px; /* 改变布局 */
}

/* 推荐：使用合成层属性（transform, opacity） */
.paint-trigger {
  transform: translateX(10px); /* 不触发重绘，只触发合成 */
  opacity: 0.8; /* 同上 */
}

实际应用场景

在大型项目中，优化CSS性能：

/* 1. 使用CSS变量减少重复 */
:root {
  --primary-color: #007bff;
  --spacing-unit: 8px;
}

/* 2. 避免深层嵌套 */
/* 坏例子 */
.nav > ul > li > a > span.icon { }

/* 好例子 */
.nav-icon { }

/* 3. 使用CSS层（现代浏览器） */
@layer base, components, utilities;

@layer base {
  * { box-sizing: border-box; }
}

@layer components {
  .button { /* ... */ }
}

@layer utilities {
  .text-center { text-align: center; }
}

11. 总结与最佳实践

通过以上10个常见CSS布局问题的解析，我们可以总结出以下最佳实践：

1. 优先使用现代布局技术

Flexbox：适用于一维布局（行或列）
Grid：适用于二维布局（行和列）
Container Queries：基于容器尺寸而非视口尺寸的响应式设计

2. 建立系统化的CSS架构

使用CSS变量管理颜色、间距、断点等
采用BEM、SMACSS等命名规范
使用CSS层（@layer）组织代码

3. 性能优先

避免过于复杂的选择器
减少重绘和回流
合理使用CSS Containment和will-change

4. 响应式设计原则

移动优先（Mobile First）
使用相对单位（rem, em, %）
避免固定像素值（特殊情况除外）

5. 浏览器兼容性

使用Autoprefixer等工具自动添加前缀
提供渐进增强方案
关注CSS新特性浏览器支持情况

6. 代码可维护性

保持代码简洁，避免过度工程化
添加必要注释
定期重构和优化

7. 调试技巧

使用浏览器开发者工具的Layout面板
利用CSS outline调试布局
使用console.log和getComputedStyle验证样式

8. 持续学习

关注CSS新特性（如Subgrid, Anchor Positioning）
学习CSS框架（如Tailwind CSS）的设计思想
参与社区讨论，分享经验

CSS布局虽然看似简单，但要做到优雅、高效、可维护，需要开发者不断实践和总结。希望本文提供的解决方案和代码示例能够帮助你在实际项目中更好地处理各种CSS布局问题，提升开发效率和用户体验。记住，好的CSS代码不仅是功能的实现，更是艺术的表达。

前端开发CSS布局常见问题解析与实用解决方案分享

1. 垂直居中问题

问题描述

解决方案

现代方案：Flexbox

传统方案：绝对定位 + Transform

实际应用场景

2. 响应式图片布局问题

问题描述

解决方案

基础响应式方案

高级方案：使用object-fit

性能优化：响应式图片与WebP格式

实际应用场景

3. 多列布局中的等高问题

问题描述

解方案

方案一：Flexbox（推荐）

方案二：CSS Grid

方案三：Table布局（传统方案）

实际应用场景

4. 文本溢出与省略号处理

问题描述

解决方案

单行文本溢出

多行文本溢出

动态省略与工具提示

实际应用场景

5. 移动端100vh高度问题

问题描述

解决方案

方案一：使用-webkit-fill-available（推荐）

方案二：使用CSS变量 + JavaScript动态计算

方案三：使用svh、lvh、dvh单位（现代方案）

实际应用场景

6. 浮动布局的清除问题

问题描述

解决方案

方案一：使用Clearfix（经典方案）

方案二：使用Flexbox替代（推荐）

方案三：使用overflow属性

实际应用场景

7. Z-index层级管理问题

问题描述

解决方案

原理理解

方案一：建立Z-index变量系统

方案二：避免创建过多层叠上下文

方案三：使用CSS自定义属性管理

实际应用场景

8. 响应式断点管理问题

问题描述

解决方案

方案一：使用CSS自定义属性定义断点

方案二：使用Sass/Less预处理器

方案三：使用CSS容器查询（现代方案）

实际应用场景

9. 自定义滚动条样式问题

问题描述

解决方案

Webkit浏览器（Chrome、Safari、Edge）

Firefox浏览器

综合方案

实际应用场景

10. CSS性能优化问题

问题描述

解决方案

1. 优化选择器性能

2. 避免强制同步布局

3. 使用CSS Containment

4. 使用will-change优化动画

5. 避免不必要的重绘

实际应用场景

11. 总结与最佳实践

1. 优先使用现代布局技术

2. 建立系统化的CSS架构

3. 性能优先

4. 响应式设计原则

5. 浏览器兼容性

6. 代码可维护性

高级方案：使用`object-fit`

方案一：使用`-webkit-fill-available`（推荐）

方案三：使用`svh`、`lvh`、`dvh`单位（现代方案）

方案三：使用`overflow`属性

4. 使用`will-change`优化动画