在Chrome DevTools中查看盒模型数值需打开Layout面板（旧版称Box Model），其以彩色区块可视化content、padding、border、margin；若未显示，需点击右上角三点启用“Show layout view”，或在Computed面板手动搜索相关属性。
Chrome DevTools 里怎么看盒模型数值
打开开发者工具后，选中元素，默认右侧面板会显示 Styles 和 Computed，但盒模型的完整尺寸（content、padding、border、margin）只在 Layout 子面板（旧版叫 Box Model）里可视化呈现。这个区域以元素为中心，用不同颜色区块标出各层大小，鼠标悬停还能看到具体像素值。
注意：Layout 面板默认可能被折叠，需点击右上角三个点 → Show layout view 才能启用；如果没看到，说明你用的是较老版本 Chrome，此时可切换到 Computed 面板，手动搜索 width、padding、border、margin 等属性，逐条核对。
修改 padding/border/margin 时为什么尺寸没变
常见原因是元素设置了 box-sizing: border-box —— 这时你改 padding 或 border，浏览器会自动压缩 content 区域来保持总宽度不变。而默认的 content-box 下，这些改动会直接撑大整体尺寸。
- 在
Styles面板里检查是否有box-sizing声明，尤其注意是否被父级或重置 CSS 影响 - 临时测试可右键某条
padding值 →Edit as HTML，把padding: 10px改成padding: 20px，观察Layout面板中 content 区块是否收缩 - 若想让修改立即反映为外扩效果，先在
Styles面板顶部加一条box-sizing: content-box !important
用命令行调试盒模型：getBoundingClientRect() 不够用怎么办
getBoundingClientRect() 只返回相对于视口的矩形，不含 padding/border/margin 的独立值。真要精确获取各层尺寸，得组合使用 getComputedStyle()：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('.my-element');
const style = getComputedStyle(el);
console.log('width:', style.width);
console.log('padding-left:', style.paddingLeft);
console.log('border-top-width:', style.borderTopWidth);
console.log('margin-right:', style.marginRight);
注意：getComputedStyle 返回的都是带单位的字符串（如 "12px"），需要 parseFloat() 才能参与计算；另外它不包含 box-sizing 本身，所以必须自己判断 content 宽高是否要减去 padding 和 border。
移动端调试时盒模型显示异常
真机调试或模拟器中，常因 viewport 缩放、device pixel ratio 或 zoom 样式导致 DevTools 显示的像素值与实际渲染不符。比如明明设了 width: 375px，Layout 面板却显示 375.5px。
- 先确认是否启用了
Device Mode（Ctrl+Shift+M），并在右上角设置正确的 device + DPR - 检查页面是否有
meta name="viewport"缺失或initial-scale不为 1 - 避免在 CSS 中使用
zoom，它会干扰所有盒模型计算，DevTools 也无法准确映射 - 遇到模糊尺寸，优先用
getBoundingClientRect().width对比offsetWidth：前者是渲染后值，后者是 CSS 计算值（含 border/padding，按box-sizing解析）
盒模型不是静态快照，而是多个样式规则叠加 + 渲染引擎解释后的结果。每次调试图形变化，都要同时盯住 Styles、Computed、Layout 三块面板，缺一不可。
