aspect-ratio 对 :empty 无效，因它不触发无内容容器的尺寸计算；防布局偏移需用 min-height 或 padding-bottom 模拟比例，:empty 仅用于精准选中，须配合其他布局手段。
aspect-ratio 不能用于空状态占位图——它只作用于有内容或尺寸约束的容器，对“空”本身无感知。想靠 aspect-ratio 防止布局偏移，必须把它用在**图片占位容器**上，而非空数据容器。
为什么aspect-ratio对:empty无效
:empty 匹配的是 DOM 结构为空的元素，而 aspect-ratio 是尺寸声明，两者不联动。即使写成 .list:empty { aspect-ratio: 16 / 9; }，浏览器也会忽略：没有宽度约束时，aspect-ratio 不触发；有宽度但内部真·空，它也不会“撑高”一个本该塌陷的容器（因为没子元素参与盒模型计算）。
常见错误现象：
- 给
ul:empty加aspect-ratio，列表区域依然高度为 0，文字或后续区块直接上移 - 误以为
aspect-ratio能替代min-height或伪元素占位，结果响应式断点切换后空白区域消失
真正能防布局偏移的空状态方案
空状态要稳住位置，核心是**提前预留空间**，不是等“空”被检测后再渲染。以下方式实测有效：
- 给容器设固定
min-height（如min-height: 200px），配合背景色或渐变占位图，最简单可靠 - 用
padding-bottom百分比 +position: relative模拟比例（如padding-bottom: 56.25%），再把提示文案用position: absolute居中——这和图片占位同理，但需手动控制文案层 - 若需响应式比例变化，用 CSS 自定义属性驱动：
padding-bottom: calc(var(--ratio, 56.25) * 1%);，JS 或服务端注入--ratio值
:empty 只能辅助，不能主控空状态布局
:empty 的价值在于精准选中结构干净的空容器，但它不生成尺寸、不阻止塌陷。想让它起作用，必须搭配其他布局手段：
- 必须同时设置
display: block或inline-block，否则伪元素可能不占空间 -
:empty::before插入文字时，得加content+display: block+min-height，否则文字不显示或高度归零 - 不要指望
:empty在 JS 动态清空内容后自动生效——DOM 更新后样式不会重算，得靠类名切换
真正容易被忽略的一点：空状态是否需要“比例”，取决于它的视觉上下文。如果是卡片内嵌的空列表，min-height 就够了；如果空区域本身是响应式画布（比如仪表盘中的图表占位），才值得用 padding-bottom 模拟比例——aspect-ratio 在这里仍是配角，不是主角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
