在浏览器中的元素周围显示CSS Box模型边界？

Question

我发现很难使用盒子模型，因为我试图更改空间和我无法在屏幕上看到的区域的值。

http://www.w3.org/TR/CSS2/box.html

是否有方法或选项在网页中的元素周围显示这些边界，这在调试过程中或在尝试正确调整内容时非常有用？

可能是一个可用于此的智能Javascript函数吗？

这些可以使用一些颜色的细线绘制。即使只能突出边界边缘，这也会有所帮助。使用此示例的示例是<IMG src="image.jpg" style="show_box_grid_lines:true" />。通过能够查看它使用的实际边界，可以选择查看此对象在屏幕中占据的区域。

今天有可能或存在吗？

Answer 1

1。）下载最新版本的firefox。

2。）右键单击页面上的任意位置＆gt;检查元素。

3。）点击右下角的3d立方体按钮。

这将显示页面上的每个元素堆叠在彼此之上。您可以选择特定元素并查看其受尊重的宽度和高度。 Firefox的检查器可以使用更多工具。看看吧！

Answer 2

您不能直接显示每组计算行（在实际页面上），但使用outline样式不会影响布局（布局中不占用空间;边框会占用空间并且会影响布局）。大纲将围绕整个内容框绘制一条线。

http://www.w3schools.com/css/css_outline.asp

您当然可以使用Chrome / IE的开发者工具或Firebug for Firefox来查看盒子模型表示和有效像素值;像素值显示在工具窗格中，边距和内容区域在内容周围显示为半透明框，同时悬停/选择工具窗格中的元素。

有时我需要查看所有内容的框，即使用outline样式时。