R3.05.3reserved space for dynamic content设计
需为动态内容预留空间
别名: 占位高度 · aspect-ratio 占位 · min-height 插槽 · 预留盒子
概念解释
动态内容会改变容器的已用尺寸；若不在第一次布局前把那个尺寸写进约束，容器只能先按空内容闭合，内容到达后再撑开。为动态内容预留空间（reserved space）的意思是：用 aspect-ratio、min-height、固定插槽或等价约束，让第一次布局已经包含最终几何，第二次布局变成盒内绘制，而不是邻居重排。预留的是几何，不是装饰性的骨架样式。
机制
默认情况下，块级盒子的高度由子内容决定。子内容为零时高度为零或塌缩为边框；子内容到达后，used height 跳变，所有依赖这条高度的后续盒子跟着平移。预留把“最终高度”提前变成约束：宽已知时用宽高比推出高，高未知时用最小高度卡住下限，多候选尺寸时按最大合理值占位。这样两棵布局树在插入点附近的几何一致，迟到的只是像素，不是盒子。
预留不足仍会在到达时再撑一截；预留过大则先出现一块空白。空白是稳定的空隙，撑开才是位移。二者的工程取舍是：宁可多留稳定空白，也不要在已绘流里补高度——除非产品明确接受那次跳动。
边界
高度真正不可预测、且范围可以差出一个视口的内容（无限时间线、用户生成长文）无法用单个 min-height 一次占准；这时应把可变区放到独立滚动容器里，让外层页面高度不再跟内部增长绑定。绝对定位的浮层不占文档流高度，预留空间对它无意义。服务端一次返回齐套 HTML、且不再异步长高的页面，第一次布局已经是最终布局，预留是空操作。打印和固定画布导出若按最终内容排，也不需要为“后到”占位。
怎么落地
- 广告、嵌入媒体、异步卡片在标记里写出宽度和高度或
aspect-ratio，不要等资源解码后再让盒子获得尺寸。 - 对提示条、优惠条这类高度离散的块，按出现时的最大高度设
min-height，未出现时保持同一占位，而不是从零长出。 - 骨架或占位色块的外框必须等于最终内容的盒子，不能只是一条细加载条。
- 验证：把动态槽的网络请求打到最慢档，第一次绘制与内容到达后的布局树做矩形对比，插入点之后的节点坐标应保持不变。