css+div ボックス モデルの研究ノート_html/css_WEB-ITnose

赤でマークされているものはデフォルト値です

1.border (ボーダー): border-top、border-bottom、border-left、border-right

1.border-color (ボーダーの色);

2. border-width (境界線の太さ): 中|薄い|厚い|値;

3.border-style (境界線のスタイル): なし|非表示|点線|実線|

パディング (内側の余白) :padding -top、padding-bottom、padding-left、padding-right

3. margin (マージン): margin-top、margin-bottom、margin-left、margin-right

margin が負の数値に設定されている場合、負の数に設定されたブロックは反対方向に移動し、その設定は他のブロックに重ねられます。ブロック間に親子関係がある場合、子ブロックのマージンを負の数に設定することで、単語ブロックを親ブロックから切り離すことができます。

4. 背景色: (背景色)

1. 要素の背景色を設定する場合、IE ではコンテンツ + パディングが機能しますが、Firefox ではコンテンツ + パディング + ボーダーが機能します。

2.本体は特殊なボックスとなっており、背景色が余白部分まで広がります。

属性の省略形:

1. 2 つの属性値が与えられた場合、前者は上下の属性を表し、後者は左右の属性を表します。

2. 3 つの属性値が与えられた場合、前者は上の属性を表し、中央の値は左右の属性を表し、後者は下の属性を表します。

3. 4つの属性値が与えられた場合、時計回りに上、右、下、左の順に属性を示します。

要素の分類

1. ブロックレベル要素 (block): 1 行を占有します

ブロックレベル要素 div1 と div2 の間の垂直マージン = MAX (div1 の margin_bottom、div2 の margin-top)

2。インライン要素(inline)

インライン要素span1とspan2の間の水平マージン=(span1のマージン-右)+(span2のマージン-左)

ボックスのフロート:

1を設定します。なし | 左|右

2. フロートをクリア: なし|左|右|両方