Chrome DevTools盒模型图位于右键“检查”后Elements面板右侧Styles下方，实时显示content（橙）、padding（蓝）、border（红）、margin（绿）四层尺寸与颜色，支持悬停高亮、点击编辑；需注意box-sizing、display、flex/grid影响实际渲染，margin合并不体现在图中。
Chrome开发者工具里直接就能看到盒模型图，不需要装插件、不用写代码——它就在你右键“检查”后右侧的 Styles 面板下方，实时、可交互、带颜色分区。
打开盒模型图示的正确路径
右键页面任意元素 → 选“检查”，或按 Ctrl+Shift+I（Mac 是 Cmd+Option+I）打开 DevTools，再在 Elements 面板中点选目标元素。此时右侧 Styles 面板最底部会自动出现一个彩色矩形图，就是盒模型可视化区域。
注意：不是所有元素都显示完整四层。比如 display: inline 元素的 margin-top 和 margin-bottom 会显示数值，但不参与布局；border-style: none 时红色边框区域不会出现。
看懂颜色分区和数值含义
图从内到外依次是：
立即学习“前端免费学习笔记（深入）”；
橙色：content 区，对应你写的 width/height 值（仅当 box-sizing: content-box 时才等于实际内容宽高）
蓝色：padding 区，上下左右数值标在对应边上
红色：border 区，只在有可见边框时显示
绿色：margin 区，负值会以虚线 + “−”号标出
鼠标悬停任一区域，右侧对应 CSS 属性行会加粗；点击数值可直接编辑，回车即生效。
为什么图上数值和实际尺寸对不上？
常见偏差基本就三类原因：
-
box-sizing是border-box：图仍按 content-box 模式画出 padding/border 外延，但实际 width 已包含它们——这时看Computed面板里的width和padding才是真实像素值 - 元素是
display: inline或父容器用了flex/grid：图示显示你写的width，但实际渲染可能被 flex-basis 或行内规则覆盖 - 垂直
margin合并了：两个p都设了margin-bottom: 24px，图里各自显示 24，但实际间距只有 24px，且图不标注“已合并”
验证方法：切换到 Computed 面板，查 margin-top、width 等最终计算值，它返回的是浏览器真正采用的像素数（字符串格式，如 "24px"）。
margin 显示 auto 却没居中？先确认硬条件
margin: auto 要生效，必须同时满足：
- 元素有明确
width（不能是auto或100%且父容器无固定宽） - 元素是块级（
display: block），不能是inline、float或position: absolute（除非配合left/right） - Flex/Grid 容器中，
margin: auto依然有效，但作用方向由容器主轴/交叉轴决定，图示不会提示这点
最快速判断：去 Computed 面板看 margin-left 和 margin-right —— 如果还是 auto，说明前提没满足；如果已转成具体像素（如 42px），说明居中已生效。
盒模型图是快照，不是真理。它反映的是你写的样式和当前 DOM 状态，但不解释计算逻辑。真要定位问题，Computed 面板比图示更可靠，尤其当你发现 margin 看起来有却没效果、padding 改了但高度不变时。
