用computed面板悬停margin可直观验证是否折叠：若高亮区域“短一截”且父子margin值不一致，即为折叠；执行getcomputedstyle($0).margintop对比父子数值，子值大于父值说明被“吃掉”；box-sizing:border-box下改padding不撑大盒子，而是压缩content；空白无背景色才是margin，有背景色则是padding或border。
直接用浏览器开发者工具的 Elements 面板 + Computed 标签页，就能定位 90% 的盒模型问题——不需要插件、不依赖第三方工具，关键在会看、会点、会验证。
怎么一眼看出 margin 是否折叠了？
外边距折叠是盒模型最常被误判的问题。别靠猜，用 Computed 面板底部的 Box model 区域直接验证：
- 鼠标悬停在
margin-top或margin-bottom上，页面高亮区域如果“短了一截”，且父子元素的 margin 值不一致，基本就是折叠了 - 临时在 Console 执行
getComputedStyle($0).marginTop（$0是当前选中元素），再对父元素执行同样命令，对比数值：若子元素的 margin 比父元素 computed 出来的值大，说明它被“吃掉”了 - 快速验证是否因
overflow: hidden导致 margin 被裁剪：Computed中 margin 数值还在，但高亮区域被父容器边界截断，那就是裁剪，不是折叠
为什么改了 padding 页面没变大？
大概率是用了 box-sizing: border-box。这个属性不改变视觉表现，但彻底改写了 width/height 的计算逻辑：
-
box-sizing: content-box（默认）：width: 200px只算 content，加padding: 10px后总宽变成 220px -
box-sizing: border-box：同一段 CSS 下，width: 200px已包含 content + padding + border，改 padding 不会撑大盒子，而是压缩 content 区域 - 在
Computed面板里，box-sizing属性一定显示在顶部，点开它旁边的箭头就能看到当前生效值；如果项目全局用了* { box-sizing: border-box }，那所有元素都走这个逻辑
嵌套太深时，如何快速定位是哪一层盒子“卡住”了？
手动逐层展开 DOM 效率低，用两个组合操作代替：
- 按
Ctrl+Shift+C（Win）或Cmd+Shift+C（Mac），进入元素选择模式，直接点页面上错位区域，DevTools 自动跳转到最深层匹配元素 - 在
Elements面板顶部搜索框输入display: flex或overflow: hidden，快速筛出可能干扰布局的父容器 - 右键可疑父元素 →
Break on > subtree modifications，当 JS 动态插入子节点或修改样式导致布局突变时，自动暂停执行，能抓到“刚塌陷那一帧”的盒模型状态
真正容易被忽略的，是 margin 和 padding 的视觉权重差异：padding 会继承背景色，margin 不会；所以当你看到两个元素之间有“空白”，先检查那个空白区域有没有背景色——有，就是 padding 或 border；没有，才是 margin。这点不验证，光调数值只会越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
