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

Question

我发现使用盒子模型很难，因为我正在尝试更改我在屏幕上实际上看不到的空间和区域的值。

在此处输入图像描述

有没有一种方法或选项可以在网页中的元素周围显示这些边界，这在调试期间或尝试正确调整事物时很有用？

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

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

类似的事情今天可能或存在吗？

score 3 · Accepted Answer

1.) 下载最新版本的火狐。

2.) 右键单击页面上的任意位置 > 检查元素。

3.) 单击右下角的 3d 立方体按钮。

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

score 1 · Accepted Answer

不能直接显示每组计算线（在实际页面上），但是使用outline样式不会影响布局（布局中不占用空间；边框确实占用空间，会影响布局）。Outline 将在整个内容框周围画一条线。

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

有时我需要查看所有东西的盒子，这就是我使用outline样式的时候。

2 回答 2