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

Question

现代 Web 开发工具（例如在 Chrome / FF / IE 中）提供了一种查看特定元素的“盒子模型”和“计算 CSS 属性”的方法。然而;

有没有办法使用这些工具轻松监控最终计算/布局位置？

---

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

Answer 1

In Chrome, Firefox, Edge and IE11+, when an element is selected, you can access this element in the console window by typing:

$0

然后，您可以使用Javascript DOM API进行查询和操作，该 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 插件，为您提供更多功能。