contain: layout paint 可隔离 dom 变更影响，但需尺寸稳定、子元素不越界且浏览器支持；单用其一效果不足，须组合使用才能阻断布局与绘制扩散链。

用 contain: layout paint 明确声明容器边界，浏览器就能把 dom 变更的影响锁在该子树内，不向上扩散到父级或兄弟元素——但前提是容器尺寸稳定、子元素不越界，且目标浏览器支持。

layout + paint 是最实用的组合

这两个值必须一起用，才能真正切断“布局影响链”和“绘制扩散链”：

• contain: layout 阻断子元素位置/尺寸变化对父级和兄弟节点的影响，比如增删子节点、切换 display、修改 width/height（只要容器自身尺寸不变）
• contain: paint 强制内容裁剪，并让浏览器跳过不可见区域的绘制；还能防止文本更新、opacity 动画、visibility: hidden 切换等触发外部重绘
• 只设其中一个，隔离效果会大打折扣：单用 layout，颜色或透明度变化仍可能引发父级样式重算；单用 paint，文字换行或图片加载撑开容器，就会导致外部重排

尺寸稳定是生效的前提

浏览器需要可信的边界才能安全跳过全局遍历。一旦尺寸不可预测，Chrome 会静默降级（比如退化为仅 style paint），隔离就失效了：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 推荐显式设置 width 和 height，或用 aspect-ratio + width: 100%
• 避免 width: fit-content、height: auto、min-height: max-content 这类依赖内容的值
• 响应式场景下，用 min-width/max-width 替代弹性宽度，或确保父容器有明确尺寸

注意哪些情况会突破隔离

Containment 不是万能屏障，以下操作会让变更“逃出”容器边界：

• position: fixed 元素默认参照视口，必然越界；position: absolute 若 top/left 用 calc(100% - 20px) 等依赖外部尺寸的写法，也会失效
• Flex/Grid 容器内的子项，contain: layout 无法切断轴向分配逻辑（如 flex-grow 分配剩余空间）
• 使用 counter-increment 时，若需防止计数器污染外部，要额外加上 style 值

JavaScript 动态设置的关键时机

不是加了 contain 就立刻起效，时机不对反而浪费性能：

• 必须在元素插入 DOM 之前 设置，比如 el.style.contain = 'layout paint' 写在 document.createElement() 后、appendChild() 前
• 折叠面板收起后建议清空 contain（设为空字符串），否则 contain: size 可能锁死高度，阻碍收缩动画
• 验证是否生效别只看 getComputedStyle，打开 DevTools 的 Paint Flashing，观察重绘区域是否真的被框定在容器内

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！