CSSボックスモデルの紹介を読めば、混乱することはなくなるでしょう

Web デザインでよく耳にするプロパティ名: content、padding、border、margin、CSS ボックス モデルにはこれらすべてのプロパティがあります。これらの特性は、日常生活でよくあるもの、つまり箱を比喩として使用することで理解できるため、ボックス モデルと呼ばれます。 CSS ボックス モデルは、Web デザインでよく使用される CSS テクノロジで使用される思考モデルです。

導入

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

CSS ボックスモデル

CSS では、すべての HTML 要素をボックスとして扱うことができます。div を例に挙げてみましょう。ブラウザ インスペクタでは、図に示すように、ボックス モデルの外観をより直感的に確認することもできます。

1. ボックスモデルの構成:

コンテンツ領域: コンテンツ (画像中央の青い領域)
パディング（写真の紫色の部分）
境界線: 境界線 (画像の灰色の領域)
余白: 余白（黄色の領域）

ボックスのサイズとブラウザのボックスのサイズの違いに注意してください
ボックスサイズ = パディング + 境界線 + コンテンツ領域
ブラウザ内のボックスのサイズ = パディング + 境界線 + コンテンツ領域 + 余白
ボックスモデルの構成 = 内側の余白 + 境界線 + コンテンツ領域 + 外側の余白

2. ボックスモデルの分類:
ボックス モデルは box-sizing によって設定でき、デフォルトの box-sizing 値は content-box です。

1) コンテンツボックス:
コンテンツ ボックス/W3C ボックス;
このモデルで設定されている幅と高さは次のとおりです。

div{
	width: 100px;//コンテンツ領域の幅 height: 100px;//コンテンツ領域の高さ border: 5px solid pink;
	パディング:10px;
	マージン: 10px;
	}

ボックスの幅: width + border-left + border-right + padding-left + padding-right
ボックスの高さ: 高さ + ボーダー上部 + ボーダー下部 + パディング上部 + パディング下部
このとき、ブラウザ内のボックスの高さは、height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom となります。
ブラウザ内のボックスの幅は、height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom です。

2) 境界ボックス:
境界ボックス/IE ボックス
box-sizingでborder-boxに値を設定する
このモデルで設定されている幅と高さは次のとおりです。

width:200px; //ボックスの幅 height:200px; //ボックスの高さ

コンテンツ領域の高さ: height - border-top - border-bottom - padding-top - padding-bottom
コンテンツ領域の高さ: height - border-top - border-bottom - padding-top - padding-bottom
ブラウザ内のボックスの幅: width + margin-left + margin-right
ブラウザ内のボックスの高さ: height + margin-top + margin-bottom

3. ボックスモデルの使用
通常、border-box は、box-sizing プロパティを設定する必要がある場合に使用されます。border-box の特徴は、設定された幅と高さがボックスの幅と高さであることです。パディングやボーダーを変更しても、ボックスのサイズは変わりませんが、コンテンツ領域のサイズは縮小されます。ジョイントベンチャーでコンテンツ領域の位置を設定する必要がある場合は、border-box を使用して設定できます。

要約する

混乱してはいけない CSS ボックス モデルに関するこの記事はこれで終わりです。CSS ボックス モデルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。