chrome box model 视图默认按 content-box 显示尺寸，若 css 设了 box-sizing: border-box，则 padding 和 border 被包含在 width/height 内，但图示仍外延显示，造成错觉；需以 computed 面板数值为准。
Chrome DevTools 里 Box Model 视图显示的数值不对？
不是数值错了，是它默认显示的是 content-box 模式下的尺寸，而你的 CSS 可能设了 box-sizing: border-box。这时候看到的「padding + border」区域被算进了宽高里，但 Box Model 图上仍会把它们画成外延部分，造成视觉错觉。
- 打开 DevTools → 选中元素 → 右侧「Styles」标签页确认是否有
box-sizing: border-box - Box Model 视图右上角的数字（比如
200×100）始终代表该元素的width和height计算值，不随box-sizing改变渲染逻辑，只改变“哪些部分被包含进去” - 想快速验证：临时删掉
box-sizing，看 Box Model 图里 content 区域是否突然变小——如果变小了，说明原来 content 实际比你写的width还窄
Firefox 和 Safari 的 Box Model 显示和 Chrome 不一样？
Firefox 开发者工具默认用颜色区块标出 margin/padding/border/content，但 padding 和 border 的数值位置容易和 Chrome 混淆；Safari 则长期不显示 margin 外边距的可视化色块（直到 Safari 16.4 才补上）。这不是 bug，是实现策略差异。
- Firefox 中点击元素后，在「Layout」面板下找「Box Model」——注意它的 padding 数值写在色块内侧，border 写在中间，和 Chrome 的标注位置相反
- Safari 需手动开启：菜单栏「Develop」→「Show Web Inspector」→ 选中元素 → 勾选右下角「Show Rulers」才能看到 margin 框线
- 跨浏览器调试时，别依赖图形对齐，优先看「Computed」标签页里的
width、padding-left等具体数值
Box Model 视图里 margin 显示为 auto 却没渲染出居中效果？
margin: auto 要生效，得满足两个硬条件：元素必须有明确宽度（不能是 width: auto），且不能是行内元素或浮动/绝对定位元素。DevTools 会照实显示 auto，但它不会告诉你这些前提是否成立。
- 检查「Computed」面板里的
margin-left和margin-right——如果都算出了具体像素值（比如42px），说明居中已生效；如果仍是auto，大概率是宽度没设或 display 不合法 - 常见翻车点：
display: inline-block元素设margin: auto不居中；position: absolute下left: 0; right: 0; margin: auto才有效 - Flex/Grid 布局下，
margin: auto依然可用，但作用对象是主轴/交叉轴方向，和传统块流不同——这时 Box Model 视图不会提示，得看布局容器的 display 类型
用 JavaScript 读取 getBoundingClientRect() 和 offsetWidth 对不上 Box Model 显示？
getBoundingClientRect() 返回的是相对于视口的浮点像素值（含 subpixel），offsetWidth 是四舍五入后的整数，且不包含 margin。Box Model 视图显示的则是 CSS 计算后的逻辑尺寸，三者根本不在同一层抽象上。
立即学习“前端免费学习笔记（深入）”；
-
offsetWidth= content + padding + border（严格等于 CSS 的width+padding+border，不管box-sizing） -
getBoundingClientRect().width= 渲染后实际占据的视口像素，可能带小数（如缩放 125% 时出现200.8px） - Box Model 视图中的「content」宽度，等于 computed style 里的
width值（若box-sizing: border-box，这个width就已经扣掉了 padding/border）
真正要对齐的，是「Computed」面板里的 width、padding-left 等字段，而不是直接拿 JS 属性去比 Box Model 图上的色块大小。
