唯一可靠调试法是用DevTools Computed面板盒模型图+outline分层描边；outline不干扰布局，border会改变尺寸引发连锁错误；需区分box-sizing、警惕margin collapse，并用不同描边策略定位嵌套失真。
直接用 DevTools 的 Computed 面板盒模型图 + outline 分层描边，是唯一能看清真实占位、不引入干扰的调试路径。加 border 或改 background-color 会改变布局，越调越偏。
打开并定位盒模型可视化图
在 Elements 面板选中目标元素后，切换到右侧的 Computed 子面板，向下滚动即可看到带色块标注的盒模型图：橙色是 margin、绿色是 content、蓝色是 padding、黑色边框是 border。鼠标悬停任一区域，页面上对应部分会高亮；点击数值可直接编辑，实时观察变化。
-
box-sizing: content-box下，width/height仅指绿色区域，总宽需手动加padding和border -
box-sizing: border-box下，width/height已含蓝色+黑色，面板数值即“所见即所得” - 若看到
margin显示0却有视觉间距，大概率是 margin collapse，不是当前元素的问题
为什么必须用 outline 而不是 border 调试嵌套
outline 不参与文档流、不触发重排、不影响 getBoundingClientRect() 返回值，而 border 在 content-box 模式下会逐层放大误差，尤其在卡片、弹窗等多层包裹结构里，加一层 border: 1px 就可能让子元素换行或溢出。
- Safari ≤ 16.6 不支持
outline: auto，必须写成outline: 1px solid #ff6b6b -
outline-offset: 2px可避免描边与文字重叠，清晰区分父子层级 -
outline对span、em等 inline 元素也生效，border在它们身上常渲染异常或被忽略
安全启用全局 outline 调试的三步法
别用 * { outline: ... } ——它会覆盖 react-select 等组件的焦点样式，破坏键盘导航，还污染 SVG 和 iframe。
立即学习“前端免费学习笔记（深入）”；
- 限定作用域：
body.debug-outline * { outline: 1px solid #007bff; outline-offset: 2px; } - 用 JS 切换：
document.body.classList.toggle('debug-outline') - 圆角元素需补视觉闭环：
box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.3)（第四参数必须等于outline-width）
分层标记快速定位错位源头
面对三层以上嵌套失真，不要猜哪一层 padding/margin 错了。用不同描边策略暴露层级：
- 最外层容器加
outline: 2px solid #000→ 锚定整体边界 - 中间容器加
border: 1px solid #00a→ 显示 content + padding 区（含 border 自身） - 最内层加
box-shadow: 0 0 0 1px #f50→ 轻量描边，只看内容轮廓 - 若
outline和border明显错位，优先查 margin collapse；若border和box-shadow错位，重点看font-size继承、line-height或vertical-align隐形扰动
真正难调的从来不是 CSS 数值本身，而是 transform: scale()、zoom、font-size 隐式继承这些不改变 computed style 却扭曲视觉呈现的细节。调试前先关掉所有 transform，比盯着面板数字有效得多。
