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 alt="为什么在响应式CSS中更倾向于使用Intrinsic Sizing（内在尺寸）？" > 或 <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 的高度部分会被完全覆盖——宽度值还能保留

aspect-ratio 比 padding-top hack 更可靠且语义清晰

过去靠 padding-bottom: 56.25% + 绝对定位“撑高”容器，本质是利用百分比 padding 相对于宽度的计算规则。但它有硬伤：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 必须套两层 DOM（外层 .outer + 内层 .inner），结构冗余
• 无法响应子元素内容变化（比如文字换行后高度突增）
• 在 flex/grid 容器中容易和 align-items 冲突，调试困难
• aspect-ratio: 16/9 一行解决，且支持动画、媒体查询条件切换（@media (max-width: 768px) { aspect-ratio: 4/3; }）

fit-content / min-content 让按钮、标签等自适应文字长度

固定 width: 230px 的按钮，在中英文混排或翻译成德语后大概率溢出或留白过多。用内在尺寸函数能交还控制权给内容：

立即学习“前端免费学习笔记（深入）”；

• width: fit-content：宽度刚好包裹内容，但不超过容器限制（配合 max-width: 100% 安全兜底）
• width: min-content：按最长单词或不可断行内联元素（如图片）决定最小宽度
• width: max-content：按所有内联内容连续排列时的总宽度（慎用，易破布局）
• 注意：这些值在 display: inline-block 或 display: grid 下表现最稳定；flex 容器中需配合 flex-shrink: 0 防止压缩

真正难的不是记住这些属性名，而是在写第一个 height: 200px 前，先问一句：这个高度真的不会被真实数据撑破？有没有可能用户换了一台设备、缩放了字体、或后端多返回了一行文本？内在尺寸不是银弹，但它把“假设”换成了“应对”。