什么是Chrome开发者工具突出显示颜色?


51

在过去的Chrome版本中,开发人员工具允许您检查页面元素,并以蓝色突出显示它们。最近版本的Chrome突出显示蓝色元素,但也有绿色和橙色区域。

颜色是什么意思?

在此输入图像描述


1
这就是我来这里的原因:蓝色#9FC4E7绿色#C2DDB6橙色#F8CB9C
fastmultiplication

Answers:


53

颜色表示与CSS框模型对应的元素区域。

  • 蓝色是内容
  • 绿色是填充物
  • 橙色是边界
  • 红色是保证金

(选择相似的橙色和红色可能不是最好的。)

您可以在开发人员工具的“ 指标”部分中看到这一点(默认情况下是隐藏的):

在此输入图像描述


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.