contain 是 css 属性而非 html 属性，需通过 css 声明生效；contain: layout paint 最常用，可隔离布局与绘制，但要求容器有明确尺寸，strict 模式更强但需谨慎使用。
contain 属性本身不是 HTML 属性，而是 CSS 属性，必须通过 CSS 声明生效；直接写在 HTML 标签里（如 <div contain="layout paint">）完全无效。
<h3>contain: layout paint 是最常用且实际有效的组合</h3>
<p>这个组合能同时封锁布局计算和绘制边界，让浏览器跳过对容器内部变化的全局遍历——比如卡片内文字更新、图标切换、状态 class 变更，只要容器自身尺寸不变，就不会引发父级或兄弟元素重排。</p>
<ul>
<li>
<code>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 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
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中频繁 togglecontain—— 渲染树重建开销远大于不加 - 若容器由 JS 动态插入（如
innerHTML +=），确保contain对应的 class 或 style 在首次渲染前就已存在；晚于首次绘制再加，优化窗口已关闭
真正难的不是写对那行 CSS，而是判断哪些模块值得加、加在哪一层、以及是否愿意为隔离性放弃某些灵活的定位或继承行为。
