CSS Containment（contain 属性）

定义

CSS Containment（CSS 隔离/包含）是一项渲染性能规范，通过 contain 属性向浏览器承诺：该元素的内部变化不会影响外部布局或绘制，从而允许引擎跳过对页面其余部分的重新计算。

取值

• layout：内部布局与外部完全隔离；
• paint：后代不会绘制到元素边界之外，引擎可在元素不可见时跳过其绘制；
• size：元素尺寸不依赖内容，可在不测量子元素的情况下布局；
• style：计数器等样式副作用不越出元素；
• 简写 content 相当于 layout paint style，strict 再加上 size。

应用

对长列表、卡片流、独立小部件声明 contain 可显著缩小回流与重绘的波及范围。它也是容器查询的基础——声明 container-type 时隐式应用了相应隔离。

相关特性

content-visibility: auto 建立在 Containment 之上，可跳过屏外内容的整个渲染流程，是长页面优化的重要手段。