看到CSS利润率调试

我用下面的CSS样式调试在我的div和span轮廓的（通常保持注释）：看到CSS利润率调试

div { outline: 1px dashed blue } span { outline: 1px dashed green }

虽然显示的div和跨度和外部边界给出了与内部对象/文本相关的填充的概念，它无法直观地显示分配给相同样式的边距在哪里。我了解填充和边距之间的差异，但我确实需要在构建页面时能够看到视觉效果（太多细节，太少关注）。

有没有什么办法可以添加一个外部矩形来显示样式的边距？

来源

2013-03-21 amphibient

为什么不使用Firebug或Inspector？ – Blender 2013-03-21 04:53:57

现在检查tothis并告诉我什么是problum http://jsfiddle.net/96PjJ/ – 2013-03-21 04:55:35

@RohitAzad他没有任何问题，他需要方便。 – 2013-03-21 04:57:36

我不知道任何允许保证金边界外的边界的属性，因为这与边际的目的不符。 W3's Box Model Explanation

虽然这是早期Web开发中的一项重要技术，但我不能强烈建议您花几分钟时间安装Firebug或熟悉Chrome的开发人员工具或Safari的“检查”功能等。您只需鼠标通过代码获取更多的数据，而不是花费数小时的时间来完成手工调试样式。

你会爱上它们的！

Firebug特别允许鼠标悬停代码，它会突出显示您的主框，颜色编码的填充和边距等。一个非常宝贵的工具 - 它甚至比Dreamweaver内置的可视轮廓工具更好。

来源

2013-03-21 04:56:57 BrianHall

我如何看到与Firebug的边缘？我只是尝试，但不能 – amphibient 2013-03-21 05:03:28

哦，你只要打开Firebug，点击HTML选项卡，然后选择右侧的布局选项卡。它创建了一个漂亮的方框来显示填充，边距等，并且支持鼠标悬停突出显示。点击或将鼠标悬停在左侧的相关html代码上，它会显示右侧的测量值，并在上面的站点视图中显示高亮/颜色代码。 – BrianHall 2013-03-21 05:07:53

据我所知，没有。我会建议使用前面提到的Chrome的开发工具或Firebug。用这些工具获得的一个很好的特性，就是能够即时操纵DOM。这使得测试放置非常快速和无痛。有时候，如果我试图放置一个div juuust，我会右键单击该div，选择检查此元素，然后查看右侧的属性。您实际上可以调整这些实时并查看页面中反映的更改。一个很好的诀窍是许多属性允许你使用向上和向下箭头键来循环它们的值。这使得调整余裕或余裕值变得很重要。

来源

2013-03-21 05:05:55

您可以使用我的新工具。将鼠标悬停在页面中的任何元素上，它会显示其布局的所有部分（边距，边框，填充等）。

HTML Box Visualizer - GitHub

来源

2016-10-24 06:03:25

看到CSS利润率调试

回答

相关问题