核心知识 · 尺寸检查
用 DevTools 核对盒模型尺寸
同样写 width: 300px，边框盒宽度可能不同。用浏览器的盒模型图核对计算结果。
待检查的活动卡片
.card {
box-sizing: content-box;
width: 300px;
padding: 24px;
border: 8px solid teal;
}先选中卡片，再看尺寸
① 在卡片上右键“检查”，确认选中的是 article.card。
② Chrome / Edge：在“元素”中打开“计算样式（Computed）”，查看盒模型图。
③ Firefox：在“查看器”的“布局”面板中查看“盒模型”；也可在“计算值”中查属性。
300 + 24 × 2 + 8 × 2 = 364px
content-box 下，300px 是内容区；边框盒宽 364px，不包含外边距。
切换为 border-box，哪些尺寸会变？
边框盒宽度变为 300px；内边距与边框仍然不变，内容区缩小为 300 − 48 − 16 = 236px。演示按钮切换的是 box-sizing，不是 width。
浏览器工具显示的是当前渲染结果。直接在开发者工具里修改样式，只改变当前页面，不会自动改写本地 HTML 或 CSS 文件。