Chrome DevTools Box Model图显示的是width/height计算值，与box-sizing无关；Computed面板和Layout面板才反映真实渲染结果，getComputedStyle可准确获取各尺寸数值。
Chrome DevTools 的 Box Model 视图能直接看到元素的 margin、padding、border、content 四层尺寸，但默认显示逻辑容易误导人——它画的是 content-box 模式下的结构图，而你的 CSS 很可能设了 box-sizing: border-box。数值本身没错，错的是你误把图当成了“实际占位示意图”。
Box Model 图上数字（如 200×100）到底代表什么
右上角那组宽高数字始终是该元素 width 和 height 属性的**计算值**，和 box-sizing 无关。它不告诉你“总共占多少像素”，只告诉你“你写的 width/height 最终算出来是多少”。
-
box-sizing: content-box（默认）下，这组数字 = content 区域大小 -
box-sizing: border-box下，这组数字 = content + padding + border 的总和，但图上仍把 padding/border 画在外围，造成“看起来比实际宽” - 想验证是否真被包含：临时删掉
box-sizing，看 content 区域在图中是否突然变窄——如果变窄了，说明原来 content 实际比这个数字小
为什么 Computed 面板的数值才真正可信
Computed 标签页里每个属性都经过所有 CSS 规则叠加、继承、优先级计算后的最终结果，不会受 Box Model 图的视觉干扰影响。
- 搜索
boxSizing，确认当前生效的是"content-box"还是"border-box" - 查
width、paddingLeft、borderTopWidth等字段，它们全是带单位的字符串（如"16px"），可直接用于调试或脚本读取 - 若某项显示为
"auto"，不代表没生效，而是浏览器按布局规则自动计算出了像素值（比如margin-left: auto居中后，在 Computed 里会变成"42px"）
Layout 面板比 Box Model 图更接近真实渲染
Layout 面板（Elements 右侧标签页）用颜色区块标出各区域，且悬停即显数值，它反映的是**最终渲染结果**，不是你写的原始声明。
- content（蓝）、padding（绿）、border（橙）、margin（灰）——颜色顺序固定，但 Firefox 标注位置相反（padding 数值写在色块内侧）
- 右键 Layout 图可单独开关各层显示，适合排查
overflow: hidden截断或transform导致的测量异常 - 它不显示
outline和box-shadow，避免视觉干扰，这点比 Box Model 图更干净
用 getComputedStyle 快速验证盒模型总宽度
在 Console 里一行命令就能拿到全部真实值，比手动加减更可靠：
const el = document.querySelector('.target');
const cs = getComputedStyle(el);
console.log({
width: cs.width,
paddingLeft: cs.paddingLeft,
paddingRight: cs.paddingRight,
borderLeftWidth: cs.borderLeftWidth,
borderRightWidth: cs.borderRightWidth,
boxSizing: cs.boxSizing
});
注意：getComputedStyle 返回的都是字符串，做计算前得用 parseFloat() 转数字；box-sizing: border-box 下，width 已含 padding 和 border，别重复加。
最易被忽略的点：Box Model 图不显示 margin: auto 的计算结果，也不提示居中失败的两个硬条件——元素必须有明确 width 且不能是 display: inline 或 position: absolute（除非配合 left/right）。这时候只能靠 Computed 面板里 margin-left 是否变成具体像素来判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
