Chrome DevTools 的 Layers 面板无法用于盒模型调试，因其仅显示合成层，不呈现 margin、padding 等盒模型区域，且已于新版中移除；应使用 Elements 与 Computed 面板联动，通过 Box model 彩色区块、实时高亮和数值编辑精准定位问题。
Chrome DevTools 的 3D View（Layers 面板）对调试盒模型嵌套基本无效，别花时间找它——它不显示 margin、不区分 padding 区，且已从新版 Chrome 中移除。
为什么 Layers 面板不能用于盒模型调试
Layers 面板原本展示的是合成层（compositing layers），只反映哪些元素被提升为独立图层（比如有 transform、opacity 或 will-change 的元素），和盒模型的 content/padding/border/margin 完全无关。它既不标出 margin 折叠位置，也不显示 padding 内容区边界，更不会告诉你 outline 和 border 哪个在哪儿。2025 年底起，Chrome 已将该面板从默认 UI 中隐藏，需手动启用实验性功能，且仍无法满足盒模型定位需求。
真正有效的替代方案：Elements + Computed 双面板联动
调试嵌套结构，靠的是实时、分层、可干预的样式检查，不是“看图”。关键操作集中在 Elements 面板的 DOM 树与右侧 Computed 标签页：
- 选中目标元素后，在 Computed 标签页底部勾选
Show all，直接展开Box model区域——它用彩色区块标出 margin（外蓝）、border（中灰）、padding（内绿）、content（白底黑字），数值精确到小数点后一位 - 鼠标悬停在任一区域上，对应的实际像素范围会在页面上高亮显示（含 margin 折叠后的实际生效范围）
- 点击某项数值（如
margin-top: 16px）可直接编辑，回车即生效，无需切回 Styles 面板 - 若父容器设置了
overflow: hidden导致子元素 margin 被裁剪，Computed 中的 margin 值仍会显示，但高亮区域会被截断——这就是折叠/裁剪发生的视觉证据
嵌套深时怎么快速定位“卡在哪一层”
DOM 层级越深，手动逐层点开效率越低。实用技巧是结合快捷键与属性筛选：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板中，按
Ctrl+Shift+C（Win）或Cmd+Shift+C（Mac）进入选择模式，直接点页面上任意区域，DevTools 自动定位到最深层的匹配元素 - 在 Elements 面板顶部搜索框输入
box-sizing: border-box或display: grid，能快速筛出参与布局的关键节点 - 右键某个父元素 →
Break on > subtree modifications，当子元素因 JS 修改导致布局突变时自动暂停，方便抓取“变化前一刻”的盒模型状态 - 对疑似塌陷的 margin，临时在 Console 执行：
getComputedStyle($0).marginTop（$0指当前选中元素），对比父子值是否一致——不一致就说明发生了折叠
别依赖“三维”幻觉，要盯住真实尺寸链
盒模型嵌套出问题，90% 是尺寸传递断裂：父容器没设 height 或 min-height，导致子元素 height: 100% 计算为 0；Grid 项未定义行高，Flex 容器拉伸失效；box-sizing 混用导致 width 累加溢出。这些都无法靠“立体视图”发现，只能靠 Computed 面板里逐级检查 height、width、flex-basis、grid-row-start 等计算值是否符合预期。最易忽略的是：margin 折叠只发生在**块级、同文档流、垂直方向、相邻兄弟或父子间**——其他任何组合都不会塌陷，但很多人误以为“写了 margin 就一定生效”。
