flex居中骨架屏容器必须设min-height: 100vh；骨架元素宽度为0需加flex: 1修复；line-height: 1防高度偏差；overflow: hidden和aspect-ratio防扫光错位。
flex居中骨架屏容器必须设min-height
骨架屏外层容器用display: flex居中时，如果没给明确高度，justify-content和align-items会失效——因为flex轴对齐需要参照物。浏览器默认把height: auto的容器压成内容高度，垂直居中就没了空间。
- 必须设
min-height: 100vh（推荐）或固定值如height: 400px - 别只给骨架元素本身加
margin: auto，块级元素在普通文档流里不响应这个声明 - 若骨架是多行结构（比如头像+标题+段落），加
flex-direction: column并配gap控制间距
Flex布局下骨架元素宽度为0的修复
在display: flex父容器里直接放骨架元素（如<div class="skeleton-title"></div>），它常塌缩成宽度0。这不是bug，而是flex默认把无固有尺寸的子项压缩到最小内容宽。
- 给骨架容器加
flex: 1（或flex-grow: 1），强制它填充剩余空间 - 用Tailwind时写
class="flex-1"；原生CSS写.skeleton-container { flex: 1; } - 避免用
width: 100%硬撑——在flex里可能触发双重计算，尤其嵌套flex时
line-height导致骨架容器高度偏差
设了height: 30px的骨架容器，实际渲染却高了几像素？大概率是line-height在捣鬼。即使骨架元素是空的<div></div>，只要父容器有默认line-height（通常1.2左右），就会撑高。
- 最简方案：给容器加
line-height: 1 - 别用
font-size: 0hack，会影响子元素继承，且伪元素动画可能错位 - 如果骨架用
::before实现，确保伪元素也继承line-height: 1，否则光效位置偏移
overflow:hidden和aspect-ratio防错位
扫光动画滑出圆角边缘、图片占位在横屏时拉伸变形——这两个问题90%出在overflow和aspect-ratio缺失。
- 所有带圆角的骨架块（如
.skeleton-avatar）必须加overflow: hidden，否则background-position动画会露白底 - 图片类占位优先用
aspect-ratio: 16/9+width: 100%，别写死height；iOS Safari 15.4+才支持aspect-ratio，老版本fallback用padding-top: 56.25% -
background-size必须用px单位（如300px 100%），iOS Safari完全忽略rem或%在此处的解析
background-size单位和overflow的组合效果——前者错用导致光条消失，后者漏写让扫描动画穿出圆角，用户一眼就能看出“假”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
