显示长方体模型的CSS？

有没有一种好方法可以仅仅使用css（或者可能是js）来显示整个页面的框模型

介于jeet.gs（在您切换它之后）和开发者视图在chrome的鼠标上显示的内容之间的东西

编辑：为了澄清，我在这里关注的问题是直观地显示现有的边距/边框/填充/框尺寸。理想的答案是将所有这些都处理为覆盖在现有页面上（例如，不破坏现有样式）或解释这是不可能的！（我不担心如何切换。）

---

此外，我意识到，如果您可以使用css预处理器，比如允许“属性查找”（property lookup）的stylus，可能会更容易处理。使用触控笔的解决方案就可以了——我只是把它作为一个标签添加了进去。但我还没有弄明白怎么做。也许可以将其与多边框技术结合使用？（）。

您只需在所有内容周围添加边框即可。这将是足够简单的，以计算利润和填补从那里

* {border: 1px solid black}

---

您可以创建一个用于调试的css类，并通过js将其附加到所需的div

比如：

div.debug {
    border: 1px dotted red;
    background-color: green;
}

在javascript中，您可以在需要调试时执行一个打开和关闭的功能

function toggleDebug(){
    var divList = document.getElementsByTagName("div");
    for(var i = 0; i < divList.length; i++){
       divList[i].classList.toggle('debug');
    }
}

函数切换调试（）{
var divList=document.getElementsByTagName（“div”）；
对于（变量i=0；i

我做了一个jsFiddle来举例说明：