CSS レイアウトを始める

要素とボックス

HTML でよく使用される概念は要素ですが、CSS ではレイアウトの基本単位はボックスであり、ボックスは常に長方形になります。

要素とボックスは 1 対 1 の対応関係にありません。CSS ルール内の疑似要素はボックスを生成しません。

要素に加えて、HTML のテキスト ノードもボックスを生成する場合があります。

ボックスモデル

ボックスには、コンテンツ、境界線、内側マージン(パディング)、外側マージン(マージン)が含まれます。次の図は、ボックス モデルの直感的な意味を示しています:

ボックスのサイズ (幅と高さ) の定義は、box-sizing 属性の影響を受けます。ボックスのサイズ変更は、content-box (デフォルト)、padding-box、border-box の 3 つのモードから選択できます。

通常フロー

通常フローはページであり、ほとんどのボックスは通常フローに配置されています。通常のストリーム内のボックスは、特定の書式設定コンテキスト内に配置する必要があります。通常のストリームには、ブロック書式設定コンテキスト (BFC) とインライン書式設定コンテキスト (IFC) の 2 つの書式設定コンテキストがあります。

ブロックレベルの書式設定コンテキストでは、ボックスは垂直方向に配置され、インライン書式設定コンテキストでは、ボックスは水平方向に配置されます。

通常のフロー ルート コンテナは、ブロック レベルの書式設定コンテキストです。さまざまなボックスが内部でインライン 書式設定コンテキストまたはブロック レベルの書式設定コンテキストを生成する場合があります。

ブロック レベルとインライン レベル

通常のフローのボックスは、ブロック レベルとインライン レベルに分割されます。インライン レベル ボックスをブロック レベルの書式設定コンテキストに直接入れることはできません。インライン ボックスを生成する HTML 要素 があり、そのコンテキストがブロック レベルである場合、その匿名ブロック レベル ボックスが内部でインライン フォーマット コンテキストを生成する必要があります。

要素の表示属性によって、ボックスがインライン レベルであるかブロック レベルであるかが決まります:

• block、table、flex、grid、list-item はブロック レベルです

• inline、inline-block、inline- table、inline-flex、inline-grid はインラインレベルです

フォーマットコンテキスト

display は要素が内部的にどのように表示されるかを決定することもあります 一部のコンテナタイプの要素によって生成されるボックスは、BFC 以外のフォーマットコンテキストを生成します。そしてIFC。

ブロック レベルのボックスを含めることができる、ブロック コンテナーと呼ばれるボックスのクラスがあります。ブロック コンテナーは、ブロック レベルのボックスのみが含まれるようにブロック レベルの書式設定コンテキストを作成するか、インライン レベルの要素のみが含まれるようにインライン レベルの書式設定コンテキストを作成します。 (つまり、ブロック コンテナーにブロック レベル ボックスとインライン レベル ボックスの両方を含めることは不可能です。そのサブボックスにブロック レベル ボックスが存在すると、すべてのインライン レベル ボックスは匿名によって自動的にラップされます。ボックス）。

非ブロックレベルの書式設定コンテキストのブロックコンテナは、インラインブロック、表セル、表キャプション用に生成された表示ボックスなど、常に新しいブロックレベルの書式設定コンテキストを作成します。ブロックレベルの書式設定コンテキスト内にもあるブロックコンテナは、overflowが表示されていない場合にのみ、新しいブロックレベルの書式設定コンテキストを作成します。

絶対配置 とフローティング ブロック コンテナーは、常に新しいブロック レベルの書式設定コンテキストを作成します。

table または inline-table の表示値を持つ要素はテーブルを生成し、テーブル内で特別な書式設定メソッドを使用して内部要素を配置します。

グリッドまたはインライングリッドの表示値を持つ要素は、テーブルと同様に、内部要素をマークするために特別なフォーマットメソッドを使用します。

フレックスまたはインラインフレックス要素の表示値は、アダプティブコンテナを生成します。 (フレックス コンテナ)、アダプティブ コンテナはその中にアダプティブ フォーマット コンテキスト (フレックス フォーマット コンテキスト) を生成します。

以上がCSS レイアウトを始めるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。