0

JavascriptとHTML5のスキルを向上させてプログラミングするために、さまざまな HTML 商品の実際の境界ボックスを視覚化したいと考えています。これは、デバッグや最終的なベスト プラクティスの開発にも役立ちます。

Android デバイスには便利な機能があり、開発者の設定を介して、さまざまなレイアウトやウィジェットの境界四角形の明示的な描画をオンまたはオフにできます。

SO は、Firefox のソースをハッキングする以外に、Web で同様の結果を得る方法を知っていますか? どのブラウザでも問題ありません。

ここに画像の説明を入力

4

1 に答える 1

1

Firefox 24 では、Firebug を使用してページごとに同様のことを行うことができます。Firebug の CSS ペインで、右クリックして [新しいルール] を選択します。ルールは次のとおりです。

html * { border: 1px solid #00f !important }

「html *」はドキュメント内のすべての要素を選択し、「!important」は他のスタイルシート設定を上書きします。Greasemonkey スクリプトを使用して、これをすべてのページに適用できます。例はこちら

編集これは、特定の要素の境界線とパディングを表示しますが、CSSボックス モデルでその要素のマージンを表示しません。ただし、親要素のアウトラインには、子要素の余白が含まれます。たとえば、html

<html><body><div style="width: 200px">
  <p style="margin: 50px;">Lorem ipsum</p></div>
</body></html>

Firebug テクニックが示している (紫色の注釈):

結果のスクリーンショット

于 2013-10-14T02:06:17.760 に答える