浏览器开发工具：HTML元素的位置是什么？

Question

现代Web开发人员工具（例如Chrome/FF/IE）提供了查看特定元素的“Box Model”和“Computed CSS Properties”的方法。然而;

有没有办法用这些工具很容易地监测最终计算/布局位置？

---

最好是绝对的，但在父容器内也是合适的。我可以修改使用任何前面提到的[Windows]浏览器，但更喜欢使用Chrome。

Answer 1

在Chrome浏览器，火狐，Edge和IE11 +，当选择一个元素时，你可以在控制台窗口中键入访问该元素：

$0

然后，您可以查询和操作使用Javascript DOM API，其中有一个非常有用的方法称为Element.getBoundingClientRect()。

所以当选择一个元素时，所有您需要做的就是键入以下内容到控制台窗口：

$0.getBoundingClientRect()

，浏览器将返回一个对象，如：

{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }

Answer 2

Chrome开发工具 - >设置 - >常规 - >元素 - >显示标尺。

您还可以安装Chrome插件，它会为您提供更多功能。