4

CSSを学んでいるのですが、物理幅とコンテンツ幅の概念に悩んでいます。サイトは、違いを真に説明することなく、それらを参照しているようです.

CSSボックスモデルに関係していることはわかっています。他の誰かが私を助けてくれれば、それは素晴らしいことです。

たとえば、css で次のように指定した場合:

div {
width: 400px;
padding-left: 20px;
padding-right: 10px;
margin: 0px 10px;
border: 2px solid pink;
}

物理的な幅には何が含まれますか? コンテンツの幅は？

4

2 に答える 2

5
  • 「幅」はコンテンツ領域を指します。箱の「内側」と考えてください。
  • 「パディング」は余分で、コンテンツ領域の外側に追加されます。0 の場合もあります。
  • 「ボーダー」は、パディングの外側に追加されます (存在する場合)。
  • 「余白」は、境界線の外側に追加されます。

したがって、幅 400、パディング左 20、右 10、マージン 20 (各辺に 10)、および 4 ピクセルの境界線 (各辺に 2) がある場合、ボックス全体が400+20+10+20+4=454px

したがって、幅がわずか 400 ピクセルのスペースにそれを収めようとしている場合は、どこかを縮小する必要があります。たとえば、幅を 54 ピクセル減らして合計を 400 にすることができます。

これは、Sean の回答に記載されているように、わずかに異なるボックス モデルを使用する「Quirks Mode」には適用されないことに注意してください。これは、適切な doctype を持たない IE にのみ適用されます。一般に、quirks モードを避けることが望ましいです。

于 2012-09-05T03:46:35.807 に答える
2

ブラウザが使用しているボックス モデルによって異なります。次の 2 つの可能性があります。

  • content-box: 要素の幅には、パディングとボーダーのプロパティは含まれません。これは、互換モードの IE を除くすべてのデフォルト モデルです。
  • border-box: 要素の幅にはパディングとボーダーが含まれます。

新しいブラウザーでは、box-sizing属性を使用してどちらを使用するかを選択できます。

したがって、モデルで提供したコードを考えると、content-boxの幅は次のdivようになります。

  400  # from width
+  20  # from padding-left
+  10  # from padding-right
+   4  # from the left and right borders
+  20  # from the left and right margins
-----------------------------------------
Physical width = 454
Content width  = 400

モデルはのborder-box幅を次のように設定divします。

  366  # the declared width is shrunk by the amount of padding and border
+  20  # from padding-left
+  10  # from padding-right
+   4  # from the left and right borders
+  20  # from the left and right margins
-----------------------------------------
Physical width = 420
Content width  = 366

詳細については、このテーマに関する Quirk's Mode の優れた記事を参照してください。

于 2012-09-05T03:48:58.253 に答える