Chrome 开发者工具的高亮颜色有哪些？

Question

在 Chrome 的旧版本中，开发者工具允许您检查页面元素，并以蓝色突出显示它们。Chrome 的最新版本会以蓝色突出显示元素，但也有绿色和橙色区域。

这些颜色代表什么意思？

Answer 1

颜色代表与以下元素对应的区域：CSS 盒子模型。

• 蓝色为内容
• 绿色是填充
• 橙色是边框
• 红色为边距

（选择相似的橙色和红色色调可能不是最好的。）

您可以在指标开发人员工具部分（默认情况下隐藏）：

Answer 2

2021 年更新

现在还显示紫色虚线区域。它表示可用的扩展空间：

看这里

Answer 3

CSS 盒子模型参数（content/padding/border/margin）。

官方文档：检查和编辑页面和样式：检查和编辑框模型参数