CSSボックスモデルとはどういう意味ですか?

CSS ボックス モデルは、すべて content、padding、border、margin などの属性を持っており、これらの属性は日常生活でよく使われる「ボックス」に例えて理解できるため、Box モデルと呼ばれています。

CSS (Cascading Style Sheet) は「カスケード スタイル シート」または「カスケード スタイル シート」と訳され、HTML 要素の表示方法を定義して使用されます。 Web ページの外観を制御します。 CSSを利用してページの内容と表示を分離することで作業効率が大幅に向上します。 CSS は、すべての HTML ドキュメント要素が、HTML ドキュメント レイアウト内で要素が占めるスペースを記述する長方形の要素ボックスを生成すると想定しており、これはボックスとして視覚化できます。 CSS は、これらのボックスを中心に「ボックス モデル」の概念を開発しました。一連のボックス関連のプロパティを定義することで、各ボックス、さらには HTML ドキュメント全体のパフォーマンスとレイアウト構造を大幅に強化し、促進することができます。ボックスである要素の場合、特別な設定がない場合、デフォルトで常に別の行を占有し、幅はブラウザ ウィンドウの幅になります。ボックスであるかどうかに関係なく、その前後の要素は、つまり、上下に累積的に配置します。 HTML ドキュメント内の各ボックスは、内側から外側に向かって、コンテンツ、パディング、ボーダー、マージンの 4 つの部分で構成されていると見ることができます。 CSS では、4 つのパーツに関連する一連のプロパティが定義されており、これらのプロパティを設定することで、ボックスのパフォーマンスを向上させることができます。

#推奨ビデオ チュートリアル: 「

CSS チュートリアル集 - PHP 中国語 Web サイト」

ボックス モデルの構成

コンテンツ エリア (コンテンツ)

コンテンツ エリアはボックス モデルの中心であり、ボックスの主要な情報コンテンツ (テキスト、画像など) が表示されます。コンテンツ領域には、幅、高さ、オーバーフローという 3 つのプロパティがあります。 width 属性と height 属性でボックスコンテンツ領域の高さと幅を指定し、コンテンツ情報が多すぎてコンテンツ領域の範囲を超えた場合は、overflow 属性で処理方法を指定できます。オーバーフロー属性値が非表示の場合、オーバーフロー部分は表示されません。表示される場合、オーバーフロー コンテンツ情報が表示され、ボックスの外側に表示されるだけです。スクロールの場合、スクロール バーがボックスに自動的に追加されます。 、ユーザーはスクロール バーをプルしてコンテンツ情報を表示できます。自動の場合、ブラウザーがオーバーフロー部分の処理方法を決定します。

パディング

パディングは、コンテンツ領域と境界線の間のスペースです。パディング属性には、padding-top、padding-bottom、padding-left、padding-right の 5 つと、上記の 4 つの方向を組み合わせたクイック パディング属性のパディングがあります。これら 5 つの属性を使用して、コンテンツ領域の情報コンテンツと全方向の境界線の間の距離を指定します。ボックスの背景色のプロパティを設定すると、塗りつぶされた領域まで背景色を拡張できます。

ボーダー (ボーダー)

ボーダーは、コンテンツ領域とパディングを囲む境界です。境界線のプロパティには、border-style、border-width、border-color に加えて、上記 3 つのプロパティを組み合わせたショートカットの border プロパティ border が含まれます。 border-style 属性は、境界線の最も重要な属性です。境界線スタイルが指定されていない場合、他の境界線属性は無視され、境界線は存在しません。 CSS では、点線 (点線)、破線 (点線)、実線 (実線) を含む 9 つの境界線スタイルを指定します。ボーダーの幅を指定するには、border-width 属性を使用します。属性値には、長さの測定値、または CSS で指定された Thin、Medium、Thick を指定できます。 border-color 属性を使用して、境界線に対応する色を指定します。属性値には、RGB 値または CSS で指定された 17 色の名前を指定できます。上記 3 つのボーダー属性を設定する場合、ボーダーの 4 方向全体をクイック設定することも、border: 2px Solid green や border-top-style: Solid, のように 4 方向ごとに個別の設定を行うこともできます。 border-left-color: 赤など。ボックスの背景色属性を設定した場合、IE では背景が枠線領域まで広がりませんが、FF などの標準ブラウザでは、特に単一枠線が点線または点線に設定されている場合、背景色が枠線領域まで広がることがあります。点線の場合、効果が見られます。

空白マージン (マージン)

マージンは、ボックスの最も外側の端に位置し、境界線の外側に追加されるスペースです。空白はボックスが互いに緊密に接続されるのを防ぎ、CSS レイアウトの重要な手段です。マージンの属性には、margin-top、margin-bottom、margin-left、margin-right の 5 つの属性と、これら 4 つの方向を組み合わせたショートカットの margin 属性 margin があり、具体的な設定や使い方は fill 属性と同様です。空白辺の値が設定されている 2 つの隣接する (水平または垂直) ボックスの場合、隣接する部分の空白辺は 2 つの空白辺の合計ではなく、2 つの空白辺の和になります。 2 つの隣接する空白境界値のサイズが等しくない場合は、2 つの大きい方の値が使用されます。同時に、CSS では、マージン プロパティに負の値を指定することができます。負のマージン値を指定すると、ボックス全体が指定された負の値の反対方向に移動し、ボックスの重なり効果が作成されます。 。 Web ページ内の要素は、正と負のマージン値を指定することで移動できます。これは、CSS レイアウト テクノロジにおける重要な方法です。

推奨チュートリアル: 「CSS チュートリアル 」

以上がCSSボックスモデルとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。