CSS 配置要素ボックス model_html/css_WEB-ITnose

ページのレイアウトは主に、position 属性、display 属性、float 属性の 3 つの属性によって制御されます。このうち、position 属性はページ上の要素間の位置関係を制御し、display 属性は要素をページ上に積み重ねるか並べるか、まったく表示しないかを制御し、float 属性は要素を整理するための制御メソッドを提供します。複数列のレイアウト。

ボックスモデルに関連する 3 つの属性

ボーダー。境界線の幅、スタイル、色を設定できます。

パディング。ボックスのコンテンツ領域と境界線の間の間隔を設定できます。

マージン。ボックスと隣接する要素との間隔を設定できます。

Border には 3 つの関連プロパティがあります。

幅 (境界線の幅)。薄い、中程度、厚いなどのテキスト値、またはパーセンテージと負の値を除く任意の絶対値を使用できます。

スタイル（ボーダースタイル）。なし、非表示、点線、破線、実線、二重、溝、尾根、インセット、アウトセットなどのテキスト値があります。

色 (境界線の色)。 RGB、HSL、16 進カラー値、カラー キーワードなど、任意のカラー値を使用できます。

デフォルト値

デフォルトでは、境界線の 3 つの関連プロパティの値は、border-width:medium;border-style:none;border-color:black;

オーバーレイマージン

縦の余白が重なり合います。このように上下のマージンが接する場合、一方のマージンが別の要素の境界線に触れるまで、それらは互いに重なり合います

--マージンは、マージンの大きい方の垂直方向に重ねられます。

-- 垂直方向のマージンのみが重畳され、水平方向のマージンは重畳されません。水平方向に隣接する要素の水平方向の間隔は、隣接するマージンの合計です

マージンの単位

-- 経験則として、テキスト要素のマージンを設定するには、通常、異なる単位を組み合わせる必要があります。たとえば、段落の左右の余白にピクセルを使用できるため、フォント サイズが大きくなったり小さくなったりしても、段落のテキストは含まれる要素の境界から常に一定の距離を維持できます。上下の余白の単位として em を使用すると、フォント サイズの変更に応じて段落間隔を増減できます。

ボックスの大きさはどれくらいですか?

1. 幅のないボックス

いわゆる「幅なし」とは、要素の width 属性が明示的に設定されていないことを意味します。ブロックレベル要素の width 属性が設定されていない場合、この属性のデフォルト値は auto で、要素の幅は親要素と同じ幅に拡張されます。

--ボックス モデルの結論 1: 幅のない要素 (つまり、幅が設定されていない) は、常に親要素の幅を満たすまで拡張されます。水平方向の境界線、パディング、およびマージンを追加すると、水平方向の境界線、パディング、およびマージンの合計に等しい量だけコンテンツの幅が減少します。

2. 幅のあるボックス

-- ボックスモデルの結論 2: 設定された幅のボックスに境界線、パディング、マージンを追加すると、ボックスの幅が広がります。実際、ボックスの width 属性はボックスのコンテンツ領域の幅のみを設定し、ボックスが占める水平方向の幅は設定しません。

--CSS3 は新しいボックス サイズ属性を追加し、これを使用してボックスの幅をデフォルトの自動状態動作に設定できます。ただし、この属性をサポートしているのは最新バージョンのブラウザのみです