计算样式与盒模型检查器

Chrome DevTools → 元素 → 计算样式标签会显示选定元素每个 CSS 属性在经过级联、继承和优先级解析后的最终计算值。它回答的是“实际应用了什么？”，而不是“写了什么？”。

计算样式面板会显示一个交互式盒模型示意图，其中包含选定元素的内容、内边距、边框和外边距尺寸。点击任意尺寸即可突出显示设置该尺寸的 CSS 规则，并跳转到样式面板。

在筛选框中输入内容，可以快速查找特定的计算属性。勾选“显示全部”以包含继承属性和浏览器默认属性。取消勾选后，只显示非默认属性，这是找到相关已应用样式的最快方式。

计算样式中以灰色显示的属性继承自父元素。点击继承属性即可跳转到设置它的元素和规则，无需手动检查标记中的父元素，就能追踪级联过程。

书写 margin: 16px 8px 会展开为四个计算值：margin-top、margin-right、margin-bottom、margin-left。计算样式面板始终显示各个完整属性，这对于调试不对称间距问题很有帮助。

无论颜色最初以何种形式书写，计算后的颜色值始终采用 rgb() 或 rgba() 格式。点击样式面板中的颜色样本，可以切换显示格式（hex、hsl、rgb）。计算样式面板始终显示解析后的颜色。

检查计算后的 font-size、font-family、line-height 和 letter-spacing，以确认排版标记是否正确应用。当请求的字体加载失败时，计算后的 font-family 中会显示浏览器字体回退结果。

box-sizing: border-box 会使宽度包含内边距和边框；box-sizing: content-box（默认值）则不包含它们。DevTools 中的盒模型示意图会反映当前应用的模型；比较内容宽度与总宽度，即可确认 box-sizing 的行为。

块级元素之间的垂直外边距会折叠为两者中较大的值。盒模型示意图会显示生效后的外边距；结合布局检查器使用，可以识别与书写值不同的折叠外边距。

样式面板会按照优先级顺序显示所有定位到该元素的规则。带删除线的规则表示已被覆盖。要找出属性冲突中胜出的规则，请在样式面板中查找最上方未带删除线的声明。

浏览器的用户代理样式表规则会显示在样式面板底部，标记为“用户代理样式表”。计算样式会显示它们解析后的值。可以使用 CSS 重置或 Normalize.css 重置这些规则，从而在不同浏览器之间建立一致的基线。

计算样式面板显示了哪些样式面板没有显示的信息？

计算样式面板和盒模型示意图会揭示所有 CSS 属性经过级联解析后的最终值。您可以使用它们追踪继承关系、调试简写属性展开、调查 box-sizing，并确定任意元素上优先级冲突中胜出的规则。