CSSボックスモデル：ウェブレイアウトの基本構造

ウェブレイアウトの本質

ウェブレイアウトのプロセスは以下の通りです：

関連するウェブ要素を準備します。ほとんどのウェブ要素は「ボックス」として扱われます。
CSSを使用してボックスのスタイルを設定し、適切な位置に配置します。
ボックス内にコンテンツを追加します。

ウェブレイアウトの核心的本質は、CSSを使ってボックスを配置することにあります。

ボックスモデルとは

ボックスモデルとは、HTMLページのレイアウト要素を矩形のボックス、つまりコンテンツを格納するコンテナとして見なす考え方です。CSSのボックスモデルは、周囲のHTML要素をカプセル化したボックスであり、以下の要素で構成されます：

ボーダー（境界線）
マージン（外側の余白）
パディング（内側の余白）
実際のコンテンツ

ボーダー（border）

borderプロパティは要素の境界線を設定できます。境界線プロパティでは、境界線のスタイルと色を指定できます。

境界線は3つの部分で構成されます：境界線の幅（太さ）、境界線のスタイル、境界線の色

構文：

border : border-width || border-style || border-color

境界線スタイル（border-style）には以下の値を設定できます：

none：境界線なし（デフォルト値）
solid：単实線（最も一般的に使用される）
dashed：破線
dotted：点線

境界線の省略記法

border: 1px solid red; /* 順序は自由 */

境界線の個別指定

border-top: 1px solid red; /* 上側の境界線のみ、他の辺も同様 */

注意： border-width、border-style、border-colorの省略プロパティは最大4つのパラメータを受け取り、異なる辺に幅、スタイル、色を設定できますが、borderプロパティは幅、スタイル、色の3つのパラメータしか受け取らないため、4つの辺の境界線が同じになります。

テーブルの細線境界

border-collapseプロパティは、ブラウザがテーブルの境界線を描画する方法を制御します。隣接するセルの境界線を制御します。

構文：

border-collapse: collapse;

collapseという単語は「合并」を意味し、`border-collapse: collapse;`は隣接する境界線を一つに結合することを示します。

境界線がボックスの実際のサイズに与える影響

境界線はボックスの実際のサイズを追加で増加させます。この問題を解決するには2つの方法があります：

ボックスのサイズを測定する際に、境界線は含めない。
測定に境界線が含まれている場合は、width/heightから境界線の幅を引く。

パディング（内側余白）

paddingプロパティは、境界線とコンテンツとの間の距離、つまり内側余白を設定するために使用されます。

paddingプロパティ（省略記法）は1〜4つの値を受け取ることができます。

上記の4つのケースは、実際の開発でどれも遭遇する可能性があります。ボックスにpadding値を指定すると、2つのことが起こります：

コンテンツと境界線の間に距離ができ、内側余白が追加されます。
paddingはボックスの実際のサイズに影響します。

つまり、ボックスにすでに幅と高さが指定されている場合、内側余白を指定するとボックスが広がります。ボックス自体にwidth/height属性が指定されていない場合、paddingはボックスのサイズを広げません。

解決策： ボックスがデザイン図のサイズと一致することを保証するには、width/heightから余分な内側余白のサイズを引きます。

ケーススタディ：新浪ナビゲーション - パディングの利点

パディング（内側余白）はボックスを広げることができるため、非常に巧みな使い方ができます。各ナビゲーション項目内の文字数が異なるため、各ボックスに幅を指定する代わりに、paddingを直接指定するのが最適です。

マージン（外側余白）

marginプロパティは、ボックス間の距離、つまり外側余白を設定するために使用されます。

marginの省略記法の意味合いはpaddingと完全に同じです。

マージンの典型的な応用

マージンはブロックレベルのボックスを水平方向に中央に配置できますが、2つの条件を満たす必要があります：

ボックスに幅（width）が指定されていること。
ボックスの左右の外側余白がautoに設定されていること。

例：

.header {
  width: 960px;
  margin: 0 auto;
}

一般的な書き方として、以下の3つの方法が使用できます：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意： 上記の方法はブロックレベル要素を水平方向に中央に配置するものです。インライン要素またはインラインブロック要素を水平方向に中央に配置するには、その親要素に`text-align:center`を追加します。

マージンの結合

marginを使用してブロック要素の垂直方向の外側余白を定義する場合、外側余白の結合が発生することがあります。主に2つのケースがあります：

隣接するブロック要素の垂直方向の外側余白の結合
ネストされたブロック要素の垂直方向の外側余白の崩壊

隣接するブロック要素の垂直方向の外側余白の結合

上下に隣接する2つのブロック要素（兄弟関係）が遭遇した場合、上の要素に下外側余白（margin-bottom）、下の要素に上外側余白（margin-top）があると、それらの間の垂直間隔はmargin-bottomとmargin-topの合計ではありません。2つの値の大きい方の値が採用されます。この現象は隣接するブロック要素の垂直方向の外側余白の結合として知られています。

解決策： できる限り1つのボックスにのみmargin値を追加します。

ネストされたブロック要素の垂直方向の外側余白の崩壊

2つのネストされた関係（親子関係）のブロック要素の場合、親要素に上外側余白があり、同時に子要素にも上外側余白があると、親要素はより大きい外側余白値に崩壊します。

解決策：

親要素に上境界線を定義する。
親要素に上内側余白を定義する。
親要素にoverflow:hiddenを追加する。

他の方法もあります。例えば、フロート、固定、絶対位置指定のボックスでは崩壊問題が発生しません。これらについては後でまとめます。

内外余白のクリア

多くのウェブ要素にはデフォルトの内外余白があり、また異なるブラウザではデフォルト値も一致しません。そのため、レイアウトの前にまずウェブ要素の内外余白をクリアする必要があります。

* {
  padding: 0; /* 内側余白をクリア */
  margin: 0;  /* 外側余白をクリア */
}

注意： 互換性を考慮して、インライン要素には左右の内外余白のみを設定し、上下の内外余白は設定しないようにしてください。ただし、ブロックレベルまたはインラインブロック要素に変換すれば問題ありません。

box-sizing

要素の総幅と総高さを計算する方法です。デフォルト値はcontent-box（標準ボックスモデル）です。

box-sizing: content-box | border-box

content-box

デフォルト値、標準ボックスモデルです。widthとheightにはコンテンツの幅と高さのみが含まれ、境界線（border）、内側余白（padding）、外側余白（margin）は含まれません。注意：内側余白、境界線、外側余白はこのボックスの外部にあります。例えば、`.box {width: 350px; border: 10px solid black;}`はブラウザでの実際の幅を370pxにします。

サイズ計算式：

width = コンテンツの幅
height = コンテンツの高さ

幅と高さの計算値には、コンテンツの境界線（border）と内側余白（padding）は含まれません。

border-box

widthとheightプロパティには、コンテンツ、内側余白、境界線が含まれますが、外側余白は含まれません。これは、ドキュメントがQuirksモードの場合にInternet Explorerが使用するボックスモデルです。注意：パディングと境界線はボックス内にあります。例えば、`.box {width: 350px; border: 10px solid black;}`はブラウザで350pxの幅で表示されるボックスを引き起こします。コンテンツボックスが負になることはできず、0に割り当てられるため、border-boxを使用して要素を消すことは不可能です。