Html 如何在某些浏览器中查看div（etc）矩形_Html_Layout_Browser_Geometry_Bounding Box

Html 如何在某些浏览器中查看div（etc）矩形

html layout browser geometry

Html 如何在某些浏览器中查看div（etc）矩形,html,layout,browser,geometry,bounding-box,Html,Layout,Browser,Geometry,Bounding Box,为了更好地编程和发展我的Javascript和HTML5技能，我想可视化各种HTML商品的实际边界框。这也将有助于调试和最终开发最佳实践 Android设备有一个方便的功能，通过开发者设置，可以打开和关闭各种布局和小部件的边界矩形的显式绘制除了黑客攻击Firefox源代码外，SO知道我如何在web上获得类似的结果吗？任何浏览器都可以在Firefox24上，您可以使用Firebug在每页上执行类似的操作。在Firebug的CSS窗格中，右键单击并选择“新建规则”。规则是： html * { b

为了更好地编程和发展我的Javascript和HTML5技能，我想可视化各种HTML商品的实际边界框。这也将有助于调试和最终开发最佳实践

Android设备有一个方便的功能，通过开发者设置，可以打开和关闭各种布局和小部件的边界矩形的显式绘制

除了黑客攻击Firefox源代码外，SO知道我如何在web上获得类似的结果吗？任何浏览器都可以

在Firefox24上，您可以使用Firebug在每页上执行类似的操作。在Firebug的CSS窗格中，右键单击并选择“新建规则”。规则是：

html * { border: 1px solid #00f !important }

“html*”选择文档中的所有元素，“！important”覆盖其他样式表设置。您可以使用Greasemonkey脚本将其应用于所有页面；范例

编辑这会显示任何特定元素的边框和填充，但不会在CSS中显示该元素的边距。但是，父元素上的轮廓将包括子元素的边距。例如，在html上

<html><body><div style="width: 200px">
  <p style="margin: 50px;">Lorem ipsum</p></div>
</body></html>


Lorem ipsum

Firebug技术显示（紫色注释）：

对于FF和Chrome，获取Web开发者工具栏。然后在“大纲”选项卡下，你有几个不同的选项。不知道为什么会关闭。它不是在请求任何工具，它是在请求它找到的任何解决方案。它在很久以前就关闭了，但我猜这是因为它请求的是一个完整的解决方案（我想这可能会被解释为“请求资源/工具等”），而不是显示一个尝试过的解决方案并指出什么是错误的（这对我来说更重要）“太宽了”，但语义。