content-visibility: auto 必须配合 contain-intrinsic-size 才能防止滚动跳变、布局塌陷和 CLS 飙升；后者需用绝对像素值（如 240px）设置于块级容器，不支持 auto/0/百分比，且会被 height/min-height 覆盖高度部分。
内在尺寸不是“更高级的写法”，而是响应式场景下更少出错、更少维护负担的选择——尤其当内容长度不可控、设备视口多变、或组件要跨项目复用时。
content-visibility: auto 必须配 contain-intrinsic-size 才不跳页
滚动时内容突然上移、卡片高度塌陷、CLS（累积布局偏移）飙升，基本都是只写了 content-visibility: auto 却漏了 contain-intrinsic-size。这个组合不是可选优化，是强制配套：
-
contain-intrinsic-size只对块级容器生效（比如<div class="card">），给 <code><img>或<p></p>加无效 - 必须用绝对像素值，如
contain-intrinsic-size: 240px；auto、0、100%全部被忽略 - Chrome 122+ 支持双值写法（
contain-intrinsic-size: 300px 240px），但 Safari 19 仍只认单值，降级需用@supports包裹 - 如果父容器或自身设了
height或min-height，contain-intrinsic-size的高度部分会被完全覆盖——宽度值还能保留 - 必须套两层 DOM（外层
.outer+ 内层.inner），结构冗余 - 无法响应子元素内容变化（比如文字换行后高度突增）
- 在 flex/grid 容器中容易和
align-items冲突，调试困难 -
aspect-ratio: 16/9一行解决，且支持动画、媒体查询条件切换（@media (max-width: 768px) { aspect-ratio: 4/3; }） -
width: fit-content：宽度刚好包裹内容，但不超过容器限制（配合max-width: 100%安全兜底） -
width: min-content：按最长单词或不可断行内联元素（如图片）决定最小宽度 -
width: max-content：按所有内联内容连续排列时的总宽度（慎用，易破布局） - 注意：这些值在
display: inline-block或display: grid下表现最稳定；flex容器中需配合flex-shrink: 0防止压缩
aspect-ratio 比 padding-top hack 更可靠且语义清晰
过去靠 padding-bottom: 56.25% + 绝对定位“撑高”容器，本质是利用百分比 padding 相对于宽度的计算规则。但它有硬伤：
fit-content / min-content 让按钮、标签等自适应文字长度
固定 width: 230px 的按钮，在中英文混排或翻译成德语后大概率溢出或留白过多。用内在尺寸函数能交还控制权给内容：
真正难的不是记住这些属性名，而是在写第一个 height: 200px 前，先问一句：这个高度真的不会被真实数据撑破？有没有可能用户换了一台设备、缩放了字体、或后端多返回了一行文本？内在尺寸不是银弹，但它把“假设”换成了“应对”。
