显示盒模型的 CSS？

Question

有没有一种只使用 css(或者可能是 js)来显示整个页面的盒子模型的好方法？

介于 jeet.gs 的功能(在您切换它之后)和 chrome 中鼠标悬停时开发人员 View 显示的内容之间的东西？

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

此外，我意识到如果您可以使用 css 预处理器(如 stylus)，它允许“属性查找”(https://learnboost.github.io/stylus/docs/variables.html)，它可能更易于处理。使用手写笔的解决方案会很好——我只是将其添加为标签。但我还没有弄清楚如何。也许可以将其与多边界技术结合使用？ (https://css-tricks.com/snippets/css/multiple-borders/)。

Answer 1

您可以在所有内容周围添加边框。从那里计算出边距和填充就足够简单了。

* {border: 1px solid black}