CSS 設計ガイド: ボックス Model_html/css_WEB-ITnose について理解する

1. ボックス モデルを理解する

すべての要素がページ上にボックスを生成します。したがって、HTML ページは実際には多数のボックスで構成されています。デフォルトでは、各ボックスの境界線は表示されず、背景は透明なので、ページ上のボックスの構造を直接見ることはできません。 WebDeveloper ツールバーの [OutLine] -> [OutLine Level Element] メニュー項目を使用すると、ボックスの境界線と背景を簡単に表示でき、ページの構成を別の角度から調べることができます。

1.1 要素ボックスの属性

1. 境界線: 境界線の幅、スタイル、色を設定できます。

2. パディング: ボックスのコンテンツ領域と境界線の間の距離を設定できます。パディングによって要素のコンテンツが境界線から内側に押し出されることを想像してください。

3. マージン: ボックスと隣接する要素の間の距離を設定できます。マージンは他の要素を外側に押し出す境界線であると考えてください。

1.2 ボックスの境界線

境界線には、幅 (border-width)、スタイル (border-style)、色 (border-color) の 3 つの関連属性があります

1.3 ボックスの内側の余白

パディングは、ボックスのコンテンツ領域とボックスの境界線の間の距離です。パディング値が設定されていない場合、要素のテキストは要素の余白に近くなります。以下の図に示すように、幅が明示的に設定されている場合、パディング値の設定によりボックスの幅が増加します。

1.4 ボックスの余白
1. 図 4 に示すように、デフォルトでは要素間に余白が存在します


スタイル シートの最初のルールとして次のルールを使用することをお勧めします。 :0 ;padding=0;}、このルールはすべての要素のデフォルトのマージンとパディングをゼロに設定します。

2. 垂直に重ねられたマージン

上の図に示すように、Div2 には上マージンが設定されており、Div3 にはマージンが設定されていませんが、Div1 と Div2 の間隔は Div2 と Div3 の間隔と同じです。これは、この時点で Div2 に設定されている margin-top が機能しないことを示しています。
つまり、マージンが広いほど 2 つの要素の距離が決まります。Div2 の margin-top を 15 に設定すると、次のようになります。Div1 と Div2 の間の距離が広くなっていることがわかります。 。

注: 垂直マージンのみが重ねられ、水平マージンは重ねられません。水平方向に隣接する要素の場合、水平方向の間隔は隣接するマージンの合計になります。

2. ボックスの大きさ

2.1 ブロック要素(block element)
1. 幅なし
いわゆる幅なしとは、要素の width 属性が明示的に設定されていないことを意味します。ブロックレベル要素が設定されていない場合、この属性のデフォルト値は auto で、要素の幅が親要素と同じ幅に拡張されます。 width 属性を明示的に設定していない要素は、常に親要素の幅を満たすように拡張され、余白を追加すると要素ボックスが小さくなります。

2. 幅を設定します
設定された幅のボックスに枠線、パディング、マージンを追加すると、ボックスの幅が広がります。拡張量は、水平ボーダーとパディングの合計に等しくなります。


2.2 インライン要素

1. 幅なし
インライン要素は、パディングと水平ボーダーを追加すると、水平ボーダーとパディングに等しい量だけ幅が広がります。そして。
2. 幅のあるブロックレベルの要素
設定された幅のボックスにボーダー、パディング、マージンを追加すると、ボックスの幅が広がります。拡張量は、水平ボーダーとパディングの合計に等しくなります。

3.2.3
CSS3 は、新しいボックス サイズ設定属性を追加します。これにより、幅のあるボックスがデフォルトの自動状態動作を持つように設定することもできます。