3

私は通常、Chrome Web Developer 拡張機能を使用して、要素の概要を説明したり、CSS をデバッグしたりしています。それができない場合は、Firefox バージョン (元の優れたバージョン) を使用しますが、 「コア」要素、そのパディング、実際の幅の境界線、およびそのマージンを示す要素の「フットプリント」を概説できるツールです。

Chrome 用、または Firefox 用のそのようなツールはありますか?

4

3 に答える 3

4

すべての要素のアウトラインを作成するには:

* {
  outline: 1px red solid;
}
于 2014-06-10T21:37:41.483 に答える
2

Chrome 開発ツールにはすべてがあります。

ここに画像の説明を入力

実際のサイズは黄色、マージンは最も濃い青、パディングは明るい青、実際の要素は最も明るい青で表示されます。次に、コンソールを開いて「メトリック」セクションに切り替えて、firebug の「レイアウト」に似たものを確認できます。

PS。長年の元 firebug ファンボーイとして、現在 Chrome 開発ツールは実際には firebug よりも強力であることを保証できます。必要なのは、すべての機能を発見することだけです。

于 2011-08-03T18:20:33.157 に答える
1

皮肉なことに、すべてのブラウザーの IE には、開発ツール (HTML タブの場合は「レイアウト」) に組み込まれています。

Firefox の場合、優れたFirebugに同様のツールがあります (ここでも HTML タブ、右側の「レイアウト」)。

于 2011-08-03T14:59:48.000 に答える