CSS 入门到实战：从样式引入、五种布局到高颜值特效一次串透

入行前端这几年，我经常被人拿着一个写好的.html文件追着问：为什么我的样式没生效？为什么我把 CSS 代码复制到文件里还是乱的？问多了以后我发现，很多人卡住的根本不是某个高级技巧，而是连“CSS 怎么引入”“要不要写<style>标签”“选择器怎么选”这些最基础的事都没彻底搞明白。这篇就把大家高频搜索的 CSS 知识点串起来，从样式引入、五种布局方式，到涟漪光圈、流光边框、字体渐变、数字加载动画，最后用一个 1440×810 的“植物大战僵尸”页面做综合实战，把常用 CSS 一次性聊透。

不管你是刚开始学前端，还是已经会写一点 HTML 但 CSS 总是一团乱麻，这篇文章都适合你。我尽量用最直白的语言，把每个知识点的“为什么”也讲清楚，而不只是给你一段能跑的效果代码。

1. 插入 CSS 的四种姿势，以及那个总被问的 style 标签问题

1.1 四种引入方式的对比

CSS 要生效，第一步是把样式和 HTML 关联起来。常见的有四种方式：外部样式表、内嵌样式表、行内样式、@import导入。下面这张表可以让你一眼看清它们的区别：

外部样式表是最推荐的。原因很实在：浏览器可以并发加载多个 CSS 文件，而且文件可以被缓存。你的用户第二次访问时，样式文件直接从本地缓存里读，速度比每次从 HTML 里解析快得多。团队协作时，每个人负责自己的 CSS 文件，冲突也少。

内嵌样式表适合那种“就一个页面，也不想多放一个文件”的情况。比如做一个小工具页、写邮件模板，或者临时调试。缺点也很明显：页面一多，样式没法复用，而且每次加载 HTML 都要重新解析一遍。

行内样式虽然能生效，但它会覆盖掉绝大多数外部样式，这在调试时特别容易造成困惑。比如你在外部写了.box { color: red }，HTML 里又写了style="color: blue"，那最终显示只能是蓝色。时间长了，你会发现想改样式时根本找不到是哪里写死的。所以我的建议是：行内样式只用来做运行时的动态计算，写死的行内样式能少就少。

@import这种方式我基本不用。因为它会把 CSS 文件的下载串行化——先加载主 CSS，再加载被@import的 CSS，阻塞了渲染路径。前端性能优化时，这属于典型的“可避免的慢”。

1.2 css 文件里到底要不要写<style>

这是搜索量很高的一个问题，说明被困扰的人真不少。直接说结论：.css 文件里永远不需要写<style>标签。

<style>是 HTML 标签，它只在 HTML 文件里使用。浏览器解析 HTML 时看到<style>，知道“这里面装的是 CSS 规则”，于是进入 CSS 解析模式。但当你写了一个style.css文件并用<link>引入时，浏览器已经知道这个文件是 CSS，不再需要<style>来提示。

如果你在.css文件里写了<style>，浏览器会把它当成 CSS 语法来解析，结果就是报错：expected media feature name之类。样式全部失效，你还会一脸懵。

正确的.css文件第一行应该是这样的：

/* style.css */ .card { width: 300px; border-radius: 12px; }

对应 HTML 里这样引入：

<link rel="stylesheet" href="style.css">

记住一个判断方法：<style>永远出现在.html文件里，.css文件里只写选择器和声明块。这个问题搞明白，你已经比很多半吊子强了。

1.3 第 1 关：元素选择器与它的兄弟选择器

网上很多 CSS 教程的第一课都是“元素选择器”，因为这个最简单也最基础。像div {}、p {}、h1 {}这种，直接按标签名选中页面里的所有同类元素，所以也叫标签选择器。

p { font-size: 16px; line-height: 1.75; color: #333; }

这样写的好处是全局统一，比如你想让所有段落都有同样的字号和行高，直接一条规则就能搞定。但它也是最容易误伤的——如果你想突出某个特殊段落，单靠元素选择器就做不到了，必须搭配其他选择器。

所以真正的实战里，我会这样组合使用：

• 类选择器.card：最常用，同一个样式可以被多个元素复用。
• ID 选择器#header：只能出现一次，“唯一性”是它的特点。但正因为这样，它的优先级很高，后期很容易盖掉其他样式，一般只用来做锚点或 JS 钩子。
• 属性选择器[type="text"]：按属性取值选择，常用于表单。
• 伪类选择器:hover、:focus、:nth-child(2n)：描述元素的状态或位置，交互效果基本靠它们。
• 后代选择器.nav a：选择.nav里面的所有a，直接但有一定性能开销。
• 子选择器.nav > a：只选直接子级，比后代选择器更精准，也更好控制。

给你一个实际例子。假设要做列表的斑马纹效果，用nth-child比手动加 class 要优雅得多：

.list-item:nth-child(2n) { background: #f7f8fa; }

再比如一个按钮，用户鼠标放上去时颜色变深，这就是元素选择器和伪类的组合：

.btn { background: #2d8cf0; transition: background 0.25s; } .btn:hover { background: #1f6fd0; }

学习选择器时，我的建议是别死记所有选择器，先掌握标签选择器、类选择器、ID 选择器、伪类、属性选择器这几个主力，其他用到再查。这就像你学英语，不需要背完整个词典才能开口说话，掌握高频词就够了。

2. 布局选型：五种布局方式与原子性 CSS 的实践取舍

2.1 五种布局方式速览

布局是 CSS 的重头戏。网上经常说“html css 五种布局方式”，一般是指：普通流布局、浮动布局、Flexbox 布局、Grid 布局、定位布局。我一个个说，然后把对应场景也讲清楚。

普通流布局就是默认的块级元素从上到下、行内元素从左到右排列。它不需要你写任何布局属性，是最原始的排版方式。

/* 什么都不写，就是普通流 */ .block { width: 100%; }

适合内容型页面，比如文章、文档，文字自然流动就行。缺点是无法精细控制元素位置，所以复杂页面不能只靠它。

浮动布局是早年做多栏排版的重要手段。float: left让元素向左靠拢，可以实现两栏、三栏。但浮动元素会脱离普通流，造成父容器高度塌陷，需要用clearfix来清理。现在新项目已经很少用它做主体布局了。

.float-left { float: left; width: 200px; } .clearfix::after { content: ""; display: block; clear: both; }

Flexbox 布局是当前最常用的一维布局方案。它解决的是“在一根轴线上怎么分配空间”的问题：水平或垂直方向上的对齐、排序、伸缩。

.container { display: flex; justify-content: center; align-items: center; gap: 12px; }

导航栏、按钮组、卡片列表、垂直居中，这些用 Flex 都特别顺手。它的核心是“主轴 + 交叉轴”，理解了这个，justify-content和align-items就不会搞混。

Grid 布局是二维布局方案，既可以控制行，也可以控制列。它把容器划分成网格，子元素直接放进格子位置。

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

这个写法表示三列等宽，间距 16px。做图片墙、商品列表、复杂后台表格时，Grid 比 Flex 更省心。

定位布局通过position属性让元素相对自身、父级或视口进行偏移。absolute、relative、fixed、sticky各有各的用途。最常见的组合是父容器position: relative，子元素position: absolute，这样子元素就可以相对父容器定位。toast 提示、下拉菜单、悬浮按钮基本都是这么实现的。

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

这一段代码就是经典的水平垂直居中方案，不管父容器多大都能居中。

2.2 什么场景用什么布局

很多人知道五种布局方式的名字，但到真正写页面时还是不知道选哪个。我的经验是：

• 页面整体骨架：先用 Grid 划分区域，比如左边侧边栏，右边主内容区。
• 区域内的小元素排布：用 Flex，比如工具栏按钮左对齐，右侧放一个操作按钮。
• 元素需要层叠、浮层、贴底：用定位。
• 内容型的文章、文档：保持普通流，最多加一点浮动或 Grid 做图文混排。

一个页面往往是这几种布局方式混合用，而不是只靠一种。比如后台管理页，整体用 Grid 搭框架，头部导航用 Flex，侧边栏固定用position: sticky，弹窗用absolute + fixed。这样组合起来才能应对真实需求。

还要补充一点：不要为了“用新特性”去用 Grid 或 Flex。如果你的页面只是几个块从上往下排，普通流就是最好的方案。过度设计是初学者最常见的毛病，我自己也犯过。

2.3 原子性 CSS：用积木思路写样式

“原子性 CSS”这个概念现在很热，指的是把每个样式规则拆到最小粒度，一个类只做一件事。设计系统里的按钮、间距、文字大小、颜色，都能拆成积木块。这种思路最早可以追溯到 Yahoo 的工程师，后来被 Tailwind CSS 发扬光大。

举个例子，传统写法是这样的：

.card-title { font-size: 18px; font-weight: 600; color: #1f2329; margin-bottom: 12px; }

原子性 CSS 的写法则是：

<h3 class="text-lg font-bold text-dark mb-3">标题文字</h3>

每个类都只承载一个属性。.text-lg管字号，.font-bold管字重，.text-dark管颜色，.mb-3管下边距。好处是样式不会重复定义，类名之间没有依赖关系，改动一个地方不会影响别处。

但原子性 CSS 也有争议。最大的问题就是 HTML 里类名太长，可读性变差。我自己实际用下来的感受是：它适合团队里有严格设计规范、组件化程度高的项目。如果你只是写个人博客、做小页面，用语义化类名配合少量工具类反而更顺手。所谓工具类，就是那些高度通用的原子类，比如.flex、.text-center、.mt-4，把它当“快捷方式”用，而不是所有样式都原子化。

3. 高频 CSS 特效的实测写法：涟漪、流光边框、渐变文字、数字动画

3.1 涟漪光圈扩散效果

这个效果在按钮、地图定位、直播 PK 图标里特别常见。它的原理其实不复杂：用一个圆形元素，不断放大并同步降低透明度，创建出一圈圈扩散的视觉效果。

<div class="ripple"> <div class="circle"></div> <div class="circle delay"></div> </div>

.ripple { position: relative; width: 80px; height: 80px; } .circle { position: absolute; inset: 0; border-radius: 50%; background: rgba(45, 140, 240, 0.4); animation: ripple 2s ease-out infinite; } .delay { animation-delay: 1s; } @keyframes ripple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } }

关键点有两个：一是transform: scale()而不是直接改width和height，因为前者走 GPU 合成，动画更流畅；二是用animation-delay让第二圈延迟出发，形成交错扩散的效果，模拟“水波不停往外冒”的感觉。

这里有一个容易被忽略的细节：圆形的初始状态要带一点透明度，不能是完全不透明的小圆点，否则扩散时看起来会像“物体突然变大”，而不是“光圈扩散”。

3.2 流光边框

流光边框是那种沿着元素边缘缓慢流动的渐变边框。实现方式有好几种，我推荐最稳的一种：用背景渐变旋转加遮罩。

思路是这样的：先做一个比元素略大的渐变背景层，然后让它旋转，再把这个旋转层裁剪成元素尺寸，最后用内层背景遮挡住中间部分，只剩一圈边框露出渐变。

.flow-border { position: relative; border-radius: 16px; overflow: hidden; } .flow-border::before { content: ""; position: absolute; inset: -100%; background: conic-gradient( from 0deg, transparent 0deg, #4f9bff 60deg, transparent 120deg ); animation: rotate 3s linear infinite; } .flow-border::after { content: ""; position: absolute; inset: 2px; border-radius: 14px; background: #fff; }

为了让你能看到文字内容，这里的结构还需要把内容层放在最上面。如果你用现成的组件库，也可以直接用border-image配合@property，但兼容性不如上面的伪元素方案。实测下来，伪元素方案在 Chrome、Edge、Safari 主流版本都没问题。

3.3 字体渐变

字体渐变绝对是面试题和实战里的常客。实现的核心是三个属性：background设置渐变色、background-clip: text把背景裁剪到文字范围内、color: transparent让文字本身的颜色透明，这样背景渐变才能透出来。

.gradient-text { background: linear-gradient(90deg, #ff9a56, #ff5f6d); background-clip: text; -webkit-background-clip: text; color: transparent; }

注意-webkit-前缀，这是因为很多浏览器对background-clip: text还需要私有前缀支持。生产环境里一定要记得加。

另外，纯color: transparent会导致那些不支持该特性的浏览器里文字直接消失。稳妥的做法是先给一个实色作为兜底，然后在支持渐变时覆盖。

.gradient-text { color: #ff5f6d; background: linear-gradient(90deg, #ff9a56, #ff5f6d); background-clip: text; -webkit-background-clip: text; color: transparent; }

这样即使浏览器不认识background-clip: text，也至少能看到一个有颜色的文字，而不是一片空白。

3.4 数字加载动画与倒计时

数字加载动画通常指一个数字从 0 滚动到目标值的效果，或者倒计时数字的闪烁切换。纯 CSS 也能做，但主要靠@property配合计数器，对浏览器版本有要求。实用的项目里，我一般用 CSS 负责显示，JS 负责数值计算，两者分工反而更稳定。

先说纯 CSS 的静态倒计时展示：可以用@property --num配合counter-reset实现，但这在 Safari 上兼容性还不行。如果只追求跑通，下面是基于 JS 的常见方案：

<div class="count" id="count">0</div>

.count { font-size: 64px; font-weight: 700; color: #2d8cf0; transition: transform 0.3s; } .count.pop { transform: scale(1.15); }

const el = document.getElementById("count"); let current = 0; const target = 100; const timer = setInterval(() => { current++; el.textContent = current; el.classList.add("pop"); setTimeout(() => el.classList.remove("pop"), 300); if (current >= target) clearInterval(timer); }, 30);

这里的.pop类利用了前面提到的transition，每次数字变化时加一个短暂的放大动画，视觉上就有“跳动”的加载感。CSS 负责呈现动画，JS 负责数据源，这种分工在实际项目里最不容易出错。

如果你想要纯 CSS 的持续循环数字动画，可以用@keyframes改变transform: translateY来滚动一组数字，类似老式股票行情机的效果：

.digit-scroll { overflow: hidden; height: 1.2em; } .digit-scroll-inner { animation: scrollUp 4s steps(4) infinite; } @keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-4.8em); } }

数字 0-9 每个占一行，滚动四条就是-4.8em。注意em是跟随当前字号变化的，这里用em比px更智能，字号变大时滚动距离自动适配。

3.5 鼠标移入配合 CSS 平移

CSS 本身没有“鼠标移入事件”，它用的机制叫伪类:hover。只要你鼠标经过元素，这个状态就触发。要让移入时不生硬，需要配合transition让变化过程平滑过渡。

一个常见的场景：卡片在鼠标移入时轻微上浮并往右移动一点，用来提示“这个模块可点击”。

.card { transform: translateY(0); transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }

translateY(-6px)就是“向上平移 6px”。translateX控制水平方向，translateZ控制纵深方向。这三种位移加起来就是translate()复合写法。

这里有个实战细节：transition里最好只写你确实要变化的属性，不要图省事写transition: all 0.3s。因为all会监听所有属性变化，包括background、width这些容易引起重排的属性，性能差不说，有时还会出现你不想看到的渐变效果。

3.6 “屏幕穿出来”的效果能实现吗

“CSS 能实现屏幕穿出来的效果吗”这个问题很有意思。纯 CSS 是没法让元素突破浏览器视口边界的，浏览器不会允许页面内容绘制到窗口外面。但视觉上的“穿出来”可以通过几个技巧组合实现。

最常见的思路是：让元素从容器里溢出来。默认情况下，块级容器会裁剪溢出的内容，但你只要不设置overflow: hidden，子元素用负margin或transform就能“冲出”父容器。配合z-index，还能让它在其他元素上方显示。

例如首页 banner 里常见的那种“卡片底部伸出屏幕”的效果：

.parent { position: relative; padding-bottom: 80px; } .child { position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%); z-index: 10; }

这里bottom: -40px让子元素超出父容器底部 40px，模拟“卡片砸出画面”的立体感。还有一种“穿屏”是利用透视perspective配合旋转变换，让元素倾斜后产生突破平面的错觉，这在 3D 卡片上很常用。

但你如果真的想要元素盖住浏览器窗口边缘，那就必须借助position: fixed，把它固定在视口坐标上。它虽然不能画出窗口，但可以始终悬浮在窗口上方，这类效果通常用在全局浮层、悬浮客服按钮上。总结一句：纯 CSS 穿出容器可以实现，穿出浏览器不行。

4. 小细节才是分水岭：删除线、em 单位、文本位置与字体处理

4.1 删除线怎么用才自然

删除线的写法很简单，一个text-decoration: line-through就搞定。难的是怎么用得自然。价格场景里，原价需要删除线，新价格在旁边突出显示，这是最经典的组合。

<div class="price"> <span class="origin">¥199</span> <span class="current">¥99</span> </div>

.origin { text-decoration: line-through; color: #999; font-size: 14px; margin-right: 8px; } .current { color: #ff4d4f; font-size: 20px; font-weight: 700; }

细节上，原价的删除线颜色要足够浅、字号要比新价格小，层次感才能拉开。删除线本身也可以用自定义颜色和粗细，更高级的写法是用text-decoration-color和text-decoration-thickness精细控制。比如：

.origin { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.3); text-decoration-thickness: 1px; }

这样删除线就不会像默认那样黑乎乎一片，视觉上更精致。

4.2 em 单位的前世今生

em是一个相对单位，它是相对当前元素的font-size计算的。如果当前元素字号是 20px，那么padding: 1em就是 20px。如果是0.5em，就是 10px。

和em经常一起出现的还有rem，rem相对的是根元素<html>的font-size，通常是 16px。两者最大区别就是：em会受父级影响，rem不受父级影响。

举个例子：

html { font-size: 16px; } .parent { font-size: 24px; } .child { font-size: 2em; } /* 实际 48px */ .grand { font-size: 2rem; } /* 实际 32px */

.child的2em等于 2 倍的父级字号 48px；.grand的2rem等于 2 倍的根字号 32px。所以如果你想让某个组件的内边距随它的字号同步放大，就用em；如果你想让整个页面的间距按全局基准统一缩放，就用rem。

还有ch单位，相对数字 “0” 的宽度，适合做文字截断检测。vw、vh相对视口尺寸，适合整屏布局。我用得最多的是rem做全局间距和字号，em做局部组件的内边距。

4.3 容器里的文本位置调整

“怎么调整 CSS 容器里的文本位置”这个问题，要看你是想让文本在容器中居中，还是想让文本内部的对齐方式发生变化。

先说居中的几种方案。单行文本最简单的是用text-align: center加line-height等于容器高度：

.box { width: 300px; height: 60px; text-align: center; line-height: 60px; }

但line-height等于高度这个技巧只适合单行文本，一旦文本换行就会满屏乱跑。更稳的是用 Flex：

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

这里align-items: center控制垂直居中，justify-content: center控制水平居中。多行文本也能正常处理。

再说文本内部的对齐。text-align控制的是文本在块内的水平对齐方式，常用值有left、right、center、justify。justify可以让两端对齐，中文排版里看起来更整齐，但要注意它会拉大词间距，英文里容易产生尴尬的空白。

垂直对齐则涉及vertical-align，但它的作用范围是“行内元素在行框内的对齐”，不是“元素在容器里的垂直居中”。很多人刚接触时在这里绕晕，你只要记住：容器居中靠 Flex 或 Grid，行内元素的相互对齐才用vertical-align。

4.4 字体设置与自定义字体

font-family是设置字体族的最核心属性。一个规范的字体堆栈会先写英文字体，再写中文字体，再写通用兜底字体：

body { font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }

这样设计的原因是：浏览器会从左到右找第一个可用的字体。英文用 Inter 显示更精致，中文在没有 PingFang SC 的 Windows 系统上会落到微软雅黑，再不行还有系统默认 UI 字体兜底。

如果要用特殊字体，比如标题字体，就轮到@font-face出场：

@font-face { font-family: "MyFont"; src: url("./fonts/myfont.woff2") format("woff2"); font-weight: 400; font-display: swap; }

font-display: swap很关键，它允许浏览器先用系统字体渲染文字，等自定义字体下载完再替换，避免文字出现长时间空白。做中文站时要特别注意，中文字体文件动不动几 MB，全量加载会拖垮首屏。真到了生产环境，要么做字体子集化，要么用 CDN 字体服务，只加载页面真正用到的那几个字。

5. 综合实战：把一个 1440×810 的“植物大战僵尸”页面用 CSS 撑起来

5.1 先把页面骨架搭好

“植物大战僵尸 html 完整代码”这个搜索词我很熟悉，网上有不少人求一份完整代码，要求适配一段 CSS，宽 1440px、高 810px，最好直接复制就能跑。这类“整页游戏”当然不可能只靠 CSS，HTML 负责结构，CSS 负责排布和动画，JS 负责游戏逻辑。但 CSS 的作用被严重低估了：没有它，整个页面就是一堆图片和文字堆叠在一起，毫无游戏感。

先搭骨架。1440×810 是一个固定的舞台尺寸，要做的是把舞台居中，并让内容不随窗口大小乱跑：

.game-stage { width: 1440px; height: 810px; margin: 0 auto; position: relative; overflow: hidden; background: linear-gradient(180deg, #87ceeb 0%, #7cc97f 60%, #5a9e4f 100%); }

margin: 0 auto实现水平居中，position: relative给内部所有绝对定位元素提供参考系，overflow: hidden防止动画元素掉出舞台。

然后是网格布局。植物大战僵尸的地图本质上是五条横向轨道，植物种在每条的格子里。用 Grid 来搭是最自然的：

.lawn { position: absolute; top: 160px; left: 100px; width: 1240px; height: 540px; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(5, 1fr); }

九列五行的网格对应游戏里的 9×5 格子。每个格子里的植物用类名定位，比如.plant-tile。这样一来，地图和格子的排布完全由 CSS 负责，JS 只需要把植物图片塞进格子就行。

5.2 植物、僵尸与阳光的动画状态

有了骨架，接下来要让画面“活”起来。这又回到前面讲的 CSS 动画。

阳光是整个游戏最核心的反馈元素。做一个阳光下落并轻微旋转的效果，正好可以复用涟漪动画的思路——用transform加透明度变化：

.sun { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, #fff4a8, #ffc82e); animation: sunFall 8s ease-in forwards; } @keyframes sunFall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(600px) rotate(180deg); opacity: 0.6; } }

植物攻击时的摇头晃脑，则可以用一个水平方向的轻微摇摆动画实现：

.plant-attack { animation: wiggle 0.4s ease-in-out 2; } @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

关键是要控制动画时长和次数，不要让它永久循环，否则植物的攻击节奏会很假。

选中卡牌时的反馈，可以用上流光边框的思路：

.card.selected { position: relative; } .card.selected::before { content: ""; position: absolute; inset: -2px; border-radius: 12px; border: 2px solid #ffc82e; animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

5.3 复现这类完整源码时的学习路线

直接复制别人给的“完整代码”当然能跑，但我的建议是：第一遍先跑起来，第二遍一定要拆开看每一段 CSS 想干什么。很多网上的“完整代码”其实排版很乱，直接复制到自己的页面通常会遇到两个问题：一是它预设的 1440×810 在你自己屏幕上显示不全，二是里面的素材路径失效，图片全部变成红叉。

关于适配，我的处理方式是：给.game-stage增加一个缩放层，而不是直接改宽高。

.scale-wrapper { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .game-stage { width: 1440px; height: 810px; transform-origin: center center; }

然后用 JS 根据window.innerWidth / 1440和window.innerHeight / 810取较小值，动态设置transform: scale()。这样在任何分辨率的屏幕上，整个舞台都能完整显示且保持比例。

如果你不想写 JS，也可以用zoom属性：

.game-stage { zoom: 0.8; }

zoom是 IE 时代的老属性，但现代浏览器至今都支持，做整页缩放非常简单。

复现别人的代码，我最推荐的一个方法是在浏览器 DevTools 里把 CSS 一条条勾掉，观察每个规则影响了页面的哪个部分。勾掉position: absolute，你立刻明白哪个元素是靠它定位的；勾掉animation，你知道哪些元素是动画驱动的。十五分钟就能把一个看起来很复杂的页面读懂七八成。

在我个人经验里，CSS 的进步不是靠看教程看出来的，是靠一遍遍“消除无效样式”和“打断原有规则”试出来的。你试得越多，心里对每条规则边界的判断就越准。

最后再分享一个实用习惯：我在做任何带固定尺寸的页面时，都会先在最外层写好“舞台 + 适配缩放”这两层结构，而不是一上来就写组件。游戏页面、活动页、大屏数据可视化，都是这种套路。先保证页面在所有屏幕上都能完整呈现，再去抠花朵的摇曳、边框的流光。顺序反了，你后面所有精细的动画都可能因为一层缩放而变形。这个顺序不颠倒，你踩的坑至少少一半。