现代的Web开发工具（例如，在Chrome / FF / IE中）提供了一种查看特定元素的“框模型”和“计算CSS属性”的方法。然而;
有没有办法使用此类工具轻松监视最终的计算/布局位置？
优选绝对的，但是在父容器内也是合适的。我可以使用任何前面提到的[Windows]浏览器，但更喜欢使用Chrome。
在Chrome，Firefox，Edge和IE11 +中，选择一个元素后，您可以在控制台窗口中输入以下内容来访问该元素：
$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 }
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句