Chrome DevTools Layout面板直观展示元素content（蓝）、padding（绿）、border（橙）、margin（灰）的实际渲染尺寸，悬停可查看数值，但不显示outline和box-shadow等视觉干扰项。
用 Chrome DevTools 的 Layout 面板一眼看穿盒模型
Chrome 浏览器的开发者工具里，Layout 面板（在 Elements 面板右侧标签页中）会直接高亮显示当前选中元素的 content、padding、border、margin 区域，颜色区分清晰（默认 content 蓝、padding 绿、border 橙、margin 灰）。只要鼠标悬停在布局图上，就能实时看到各区域尺寸数值。
注意：这个视图反映的是**实际生效的盒模型**，不受你写的 box-sizing 值是否被覆盖影响——它展示的是最终渲染结果。
- 如果
padding或border显示为 0，但视觉上明显有留白或边框，大概率是其他规则（比如父元素overflow: hidden截断，或transform导致重绘异常）干扰了测量 - 右键点击 Layout 图中的任意区域，可勾选/取消 “Show padding/border/margin” 单独控制显示项
- 该面板不显示
box-sizing属性值本身，需回看 Styles 面板里的box-sizing计算值（Computed 标签页下搜索box-sizing）
用 getComputedStyle 快速读取真实尺寸和 box-sizing
在 Console 中执行 getComputedStyle(document.querySelector('your-selector'))，能拿到所有最终计算值。关键字段包括：
-
boxSizing：返回"content-box"或"border-box"，确认当前生效策略 -
width/height：仅当设了具体值时才有意义；若为"auto"，说明尺寸由内容或布局上下文决定 -
paddingLeft/paddingRight/borderLeftWidth等：都是带单位的字符串（如"8px"），可直接用于调试比对
更进一步，用以下代码快速输出盒模型四区尺寸总和：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('.target');
const cs = getComputedStyle(el);
const w = parseFloat(cs.width);
const pl = parseFloat(cs.paddingLeft);
const pr = parseFloat(cs.paddingRight);
const bl = parseFloat(cs.borderLeftWidth);
const br = parseFloat(cs.borderRightWidth);
console.log('content width:', w);
console.log('total width (border-box):', w + pl + pr + bl + br);box-sizing: border-box 是多数场景的“防错开关”
当你给一个宽 200px 的元素加 padding: 20px 和 border: 5px solid，默认 content-box 下，它实际占位是 200 + 40 + 10 = 250px，极易撑破容器。而设成 border-box 后，200px 就是最终总宽度，内边距和边框从里面“抠”空间。
- 全局重置推荐写法：
* { box-sizing: border-box; }，但要注意它会影响<html>、<body>等原生行为，极少数场景（如需要精确控制滚动条宽度）需排除 -
table元素及其子元素（td、th）默认忽略box-sizing，即使显式设置也无效 - Flex 或 Grid 容器的直接子项，
box-sizing仍生效，但尺寸可能被弹性算法覆盖，此时应优先检查flex-basis或grid-template-columns
遇到尺寸“凭空多出”？先查 outline 和 box-shadow
outline 不属于盒模型，但它会渲染在元素外，并可能影响视觉定位；box-shadow 的 spread 值也会扩大投影范围，容易误判为 margin 或 padding。
- DevTools 的 Layout 面板**不显示 outline 和 box-shadow**，它们不会计入尺寸计算，但会占据视觉空间
- 在 Styles 面板中搜索
outline或box-shadow，临时删掉看看布局是否“回归正常” - 若必须保留
box-shadow且要精确控制占位，可用transform: translateZ(0)强制硬件加速，有时能缓解渲染偏差
盒模型判断真正难的不是看数字，而是分清哪些“看起来像尺寸”的东西其实根本不参与布局计算——outline、box-shadow、transform 位移、甚至 font-size 引起的行高溢出，都可能伪装成盒模型问题。调试时先锁定 Layout 面板的真实数据，再逐个排除这些“视觉干扰项”。
