isolation: isolate 不影响盒模型，仅创建新层叠上下文；它不改变 width、height、margin、padding 等尺寸或布局行为，只限制 z-index 作用范围和 mix-blend-mode 混合边界。
isolation: isolate 不会创建新的盒模型，它只创建新的层叠上下文（stacking context）——盒模型本身完全不受影响。
isolation: isolate 与盒模型无关
很多人误以为 isolation: isolate 会“隔离盒子尺寸”或“重置 padding/border/margin 计算”，这是常见误解。它对 box-sizing、width、height、margin、padding 等盒模型相关属性毫无作用。元素的尺寸、内外边距、边框行为照常运行，和没加 isolation 一模一样。
它的唯一效果是：强制该元素成为一个新的层叠上下文根节点。这意味着：
- 内部
z-index只在该元素内生效，不与外部比较 -
mix-blend-mode的混合范围被限制在该元素边界内（不和外部元素混合） - 不会改变任何盒模型计算逻辑或渲染布局流
为什么有人觉得它“像新盒模型”？
这种错觉通常来自两个叠加现象：
- 开发者同时加了
isolation: isolate和position: relative（或transform），而后者可能触发了 layout 重排或合成层切换，让人误归因于isolation - 混合模式（如
mix-blend-mode: screen）在隔离前后视觉差异明显，比如背景色突然“不参与混合”了，看起来像“盒子被切出来”，实则只是层叠顺序变了 - 浏览器开发者工具的“Layers”面板里，
isolation: isolate元素常单独成层，但这属于合成层（compositing layer），不是盒模型层
真正影响盒模型渲染层的其实是 box-sizing 和 display
如果你目标是控制盒模型渲染行为（比如让 width 包含 padding 和 border），该用的是：
-
box-sizing: border-box—— 改变尺寸计算方式 -
display: inline-block或display: flex—— 改变盒类型和布局上下文 -
overflow: hidden—— 触发 BFC，影响 margin 塌陷等布局行为
isolation: isolate 连 BFC 都不触发，它只管 z 轴堆叠和混合边界。别指望它解决 margin 塌陷、float 包裹或尺寸溢出问题。
容易踩的坑：混用 isolation 和 opacity/transform
当你发现加了 isolation: isolate 后布局“好像变了”，大概率是因为：
- 父级或兄弟元素用了
opacity: 0.99或transform: translateZ(0)，意外创建了其他层叠上下文，干扰了预期层级 - 你用
z-index试图控制子元素，却忘了父容器没设position，导致z-index失效（isolation不解决这个问题） - 调试时只盯着“是否隔离”，忽略了实际起作用的是整个层叠上下文链，比如
body → .container → .card中任意一环都可能成为 stacking context 根
真要验证是否生效，打开 Chrome DevTools 的 “Layers” 面板，看该元素是否独立成层；再检查 “Computed” 标签页，确认 isolation 值为 isolate，且没有被其他属性覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
