box model面板位于浏览器开发者工具右侧面板：chrome/edge默认显示，firefox需手动开启，safari在layout页；它显示元素实际盒模型尺寸，虚线值表示继承、默认样式或未生效规则。
Box Model面板在哪找？
打开浏览器开发者工具（F12 或右键 → 检查），选中目标元素后，默认就在右侧面板的 Styles 标签页下方——但注意，它不是总在显眼位置：Chrome 和 Edge 默认显示，Firefox 需要点击右上角三个点 → 勾选 Show box model；Safari 则藏在 Layout 标签页里。
常见错误现象：margin 看不见、padding 数值对不上、元素实际宽高和 CSS 写的不一致——基本都是没打开 Box Model 面板，或没选中真正生效的那个元素（比如父容器套了多层 div，点错了）。
怎么看出 margin 有没有塌陷？
Box Model 面板里，margin 区域显示为透明灰色，上下相邻块级元素的垂直 margin 如果发生塌陷，面板不会叠加显示，而是只显示较大的那个值——但这点不会直接标注“已塌陷”，得靠对比：
- 手动把两个相邻元素的
margin-top和margin-bottom分别设成不同值（比如20px和30px） - 看面板里该方向显示的是
30px，且父容器没有border或padding——大概率塌陷了 - 验证方式：给父容器加
overflow: hidden或border: 1px solid transparent，再看面板数值是否变成50px
性能影响很小，但调试时容易误判布局高度，尤其做响应式折叠/展开时，塌陷会让容器高度突然跳变。
padding/border 怎么影响 width: 100%？
width: 100% 默认是按 content box 计算的，但如果你开了 box-sizing: border-box，Box Model 面板顶部会明确标出 content、padding、border、margin 四段尺寸，且总宽度 = width 值。
容易踩的坑：
- 没改
box-sizing时，给一个width: 100%的元素加padding: 20px，它会撑出父容器——面板里content宽度会小于 100%，但整体宽度超了 - 用 Flex 或 Grid 布局时，
box-sizing不影响主轴尺寸计算逻辑，但 Box Model 面板仍按实际渲染尺寸分段显示，别被误导 - 某些重置样式（如
* { box-sizing: border-box }）可能被覆盖，检查面板顶部是否显示border-box字样，而不是只看 CSS 文件
为什么有时候 Box Model 面板数值是虚线？
虚线表示该值来自继承、浏览器默认样式（user agent stylesheet），或被更优先的规则覆盖但未生效（比如 display: none 元素的 margin 会灰掉+虚线）。
典型场景：
- 父元素
font-size: 14px，子元素写margin: 1em→ 面板显示14px但带虚线（因为em是计算值，非原始声明） - 用了
calc(100% - 20px)，面板显示具体像素值，但旁边有小问号图标，悬停能看到原始表达式 - 媒体查询未命中时，对应规则的数值会变虚线+半透明，这时候别急着调样式，先切到
Responsive Design Mode模拟断点
最常被忽略的是：面板显示的数值永远是最终渲染值，不是你写的源码。想确认某条 CSS 是否生效，得看 Styles 面板里那行是否被划掉，而不是只盯 Box Model 数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
