contain 是 CSS 属性而非 HTML 属性，需通过 CSS 声明生效；contain: layout paint 最常用，可隔离布局与绘制，但要求容器有明确尺寸，strict 模式更强但需谨慎使用。
属性本身不是 HTML 属性，而是 CSS 属性，必须通过 CSS 声明生效；直接写在 HTML 标签里（如
contain
）完全无效。
contain: layout paint 是最常用且实际有效的组合
这个组合能同时封锁布局计算和绘制边界，让浏览器跳过对容器内部变化的全局遍历——比如卡片内文字更新、图标切换、状态 class 变更，只要容器自身尺寸不变，就不会引发父级或兄弟元素重排。
contain: layout
隔离布局影响：子元素
width
/
height
/
margin
变化不会触发外部重排，但若你用 JS 改了容器自身的
width
或
height
，仍会重排 —— 所以别在动画帧里反复改它
contain: paint
强制裁剪溢出 + 跳过不可见区域绘制：滚动时，被卷出视口的容器内容不会被光栅化，显著降低 GPU 压力
不要用
contain: content
：Chrome 120+ 已废弃，MDN 明确标记为“不推荐”，语义模糊且行为不稳定
不设尺寸的容器加 contain 就等于没加
浏览器要求
contain: layout
或
contain: strict
的容器必须有明确的尺寸上下文，否则静默忽略。所谓“明确”，指至少满足以下任一条件：
设置了
width
和/或
height
设置了
min-width
和/或
min-height
（推荐，更适应响应式）
是弹性容器（
display: flex
）且父级给了确定尺寸
典型失效写法：
.card { contain: layout paint; }
—— 若该
.card
高度完全由子内容撑开，Chrome 直接无视这条声明。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
strict 模式要小心 size 子项带来的隐性约束
contain: strict
等价于
layout paint style size
全开，隔离最强，但
size
子项会强制浏览器跳过子元素尺寸推导，转而依赖容器自身显式尺寸。这意味着：
容器必须有稳定宽高（
height: 200px
或
min-height: 120px
），否则渲染可能塌陷或错位
子元素若用了
position: absolute
且
top
/
left
超出容器边界，会被裁剪 —— 因为
layout
隔离了包含块计算，它不再把父容器当定位参考
position: fixed
元素在
contain: strict
容器内会脱离预期层级，甚至被提升到视口级，导致 z-index 失效
JS 动态设置 contain 时容易忽略兼容性与时机
你可以用
element.style.contain = 'layout paint'
，但不能默认它一定起作用：
Firefox 69+、Chrome 56+、Safari 15.4+ 支持，但 Safari 对
size
的实现仍有偏差，生产环境务必先检测：
if ('contain' in document.documentElement.style)
避免在
requestAnimationFrame
中频繁 toggle
contain
—— 渲染树重建开销远大于不加
若容器由 JS 动态插入（如
innerHTML +=
），确保
contain
对应的 class 或 style 在首次渲染前就已存在；晚于首次绘制再加，优化窗口已关闭
真正难的不是写对那行 CSS，而是判断哪些模块值得加、加在哪一层、以及是否愿意为隔离性放弃某些灵活的定位或继承行为。