用 scrollbar-gutter: stable 可稳定滚动条空间，防止页面左右晃动；需配合 overflow-y: scroll 强制常驻滚动条，并注意 Safari 17.4+/Chrome 107+ 兼容性及旧版降级方案。
用 scrollbar-gutter: stable 锁定滚动条空间
页面左右晃动，八成是因为滚动条出现/消失导致视口宽度突变。这不是 bug，是浏览器默认行为：内容撑高后触发竖向滚动条，body 可用宽度瞬间减少 16–17px，所有居中元素“啪”一下左移。
直接加这三行就能稳住：
html {
overflow-y: scroll;
scrollbar-gutter: stable;
}
overflow-y: scroll 强制竖向滚动条常驻；scrollbar-gutter: stable 提前预留空间，不等它出现再计算——连带解决弹窗打开时页面右移、position: fixed 导航栏跳位等问题。
注意：scrollbar-gutter 在 Safari 17.4+ 和 Chrome 107+ 支持良好，旧版可降级为 html { margin-left: -17px; padding-left: 17px; } 模拟占位，但需配合 box-sizing: border-box 防止边框叠加。
立即学习“前端免费学习笔记（深入）”；
让动画元素彻底脱离文档流
文字滑入、卡片悬停放大时“一抖”，往往因为用了 top、left 或 width 过渡——这些属性每帧都触发重排（reflow），浏览器得重新算整个布局。
正确做法只有两个关键点：
- 给动画元素的**最近父容器**加
position: relative（没这句，position: absolute会锚定到html） - 动画本身只用
transform和opacity，例如把top: 20px改成transform: translateY(20px) - 补一行
backface-visibility: hidden，专治旧版 Safari 的亚像素模糊和微跳
别碰 will-change: transform 常驻写法，JS 动画开始前动态加，结束立刻移除，否则图层长期占用内存。
图片和动态文本必须预设尺寸
图片加载前空白、倒计时数字从 “9” 变 “10” 时卡片突然变宽——都是因为浏览器没提前知道该留多少空间。
图片直接写 width 和 height 属性（不是 CSS）：
<img src="card.jpg" width="320" height="240">
再配 max-width: 100%; height: auto; 保证响应式缩放；不写属性？浏览器直到图片下载完才知尺寸，必然抖。
动态数字（如倒计时）用 rem 宽度 + 固定字体族：
- 根元素设
:root { font-size: 16px; }，小屏媒体查询里调小（如14px） - 数字容器写
width: 4rem;（够塞下 “99:59”） - 避免用
ch单位——中文字符宽度浮动大，rem更可控
Grid/Flex 容器别在媒体查询里切 display
大屏用 display: grid，小屏切 display: flex？每次切换都会销毁合成层、强制全量重排，比内容加载抖得还狠。
统一用 display: grid，只改列数：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(1, 1fr);
}
}
动态插入项（如 JS 追加卡片）要设 grid-auto-rows: minmax(40px, auto)，防高度塌陷；图片子项务必加 aspect-ratio: 16 / 9 或 padding-top: 56.25% 占位，否则 Grid 轨道重算会连锁跳动。
真正难的不是写对某一行代码，而是所有环节——滚动条、定位锚点、图片属性、Grid 规则——都得同步守住“尺寸可预期”这条线。漏掉任意一环，抖动就会从那个缺口冒出来。
