CSS の視覚的な書式設定モデルを徹底的に理解する (例付き)

この記事の内容は、CSS の視覚的な書式設定モデルを徹底的に理解することに関するものです (例付き)。必要な方は参考にしていただければ幸いです。

いつ始めても、大切なのは始めた後にやめないことです。

はじめに

一部のフロントエンド エンジニアにとって、CSS は明らかに特定のスタイルが設定されているにもかかわらず、レイアウトが機能しないことに悩まされることがあります。

あなたもこの問題を抱えている場合は、CSS 視覚書式設定モデルとは何かを学びましょう。自分自身と敵を知ることによってのみ、問題を解決することができます。

CSS ビジュアル フォーマット モデル は、ビジュアル メディア上のドキュメントを処理および表示するときに使用される計算ルールです。このモデルは CSS の基本概念の 1 つです。

ビジュアル書式設定モデルは、CSS ボックス モデルに従ってドキュメント内の要素をボックスに変換します。各ボックスのレイアウトは次の要素によって決まります。ボックスのサイズ: 正確に指定、制約によって指定、または指定なし

1. ボックスのタイプ: インライン、インラインレベル、アトミック

   インラインレベル)、ブロックボックス

2. 
   #配置スキーム: 通常のフロー配置、フローティング配置、または絶対配置

3. ドキュメント ツリー内のその他の要素: 現在のボックスの子要素または兄弟要素

4. #ビューポートのサイズと位置

##含まれる画像のサイズ

5. ##その他の外部要因

6. モデルは、ボックスを含むブロック (包含ブロック) の境界に基づいてボックスをレンダリングします。通常、ボックスはその子孫要素を含む包含ブロックを作成しますが、ボックスは包含ブロックによって制限されません。ボックスのレイアウトが包含ブロックの外側で実行される場合、それはオーバーフローと呼ばれます。
7. ボックスの生成。はじめに
   ボックス生成は CSS ビジュアル書式設定モデルの一部であり、ドキュメント要素からボックスを生成するために使用されます。ボックスにはさまざまな種類があり、ボックスの種類によってフォーマットも異なります。ボックスの種類は CSS の表示プロパティによって異なります。

ブロックレベル要素とブロックボックス

要素の表示がブロック、リスト項目、またはテーブルの場合、その要素はブロックレベル要素になります。ブロックレベル要素はブロック (記事の段落など) にフォーマットされ、デフォルトで垂直に配置されます。

各ブロック レベル ボックスは、ブロック フォーマット コンテキスト (ブロック フォーマット コンテキスト) の作成に参加し、各ブロック レベル要素は少なくとも 1 つのブロック レベル ボックス、つまり主要なブロックを生成します。レベル ボックス (主ブロック レベル ボックス)。リスト項目などの一部の要素は箇条書きを保持する追加のボックスを生成し、リスト項目を生成する要素は追加のボックスを生成する場合があります。ただし、ほとんどの要素はメイン ブロック レベルのボックスのみを生成します。

メインのブロックレベルのボックスには、子孫要素によって生成されたボックスとコンテンツが含まれており、位置決めスキームにも参加します。

ブロックレベルのボックスは、ブロック コンテナ ボックスである場合もあります。ブロック コンテナ ボックスには、他のブロック レベルのボックスのみが含まれるか、インライン ボックスのみが含まれ、インライン書式設定コンテキストが作成されます。

ブロックレベルのボックスはブロック コンテナ ボックスとは異なることに注意することが重要です。前者は要素とその親および兄弟の動作を記述し、後者は要素とその子孫の動作を記述します。一部のブロック レベル ボックスは、テーブルなどのブロック コンテナ ボックスではありません。また、一部のブロック コンテナ ボックスは、非置換インライン ブロックや非置換テーブル セルなど、ブロック レベル ボックスではありません。

ブロックコンテナボックスでもあるブロックレベルのボックスをブロックボックスと呼びます。

匿名ブロック ボックス

視覚的な書式設定を行う場合、これらのボックスは CSS セレクターでは選択できないため、匿名の匿名ボックスと呼ばれます。 。

CSS セレクターは匿名ボックスに作用できないため、スタイル シートでスタイル設定することはできません。つまり、この時点では、継承可能なすべての CSS プロパティの値は継承され、継承できないすべての CSS プロパティの値は初期値となります。

ボックスを含むブロックには、インライン レベル ボックスのみ、またはブロック レベル ボックスのみが含まれますが、通常、ドキュメントには両方が含まれます。この場合、それらは隣接するインライン レベル ボックスの外側になります。 匿名のブロック ボックスを作成します。 例セクション
次の HTML コードを考慮し、デフォルトのスタイルを維持する (つまり、表示がブロックである) と仮定します。

<div>
   Some inline text
   <p>followed by a paragraph</p>
   followed by more inline text.
</div>

この時点で、2 つの匿名ブロック ボックスが表示されます。生成されるもの: 1 つは要素の前のテキスト (一部のインライン テキスト)、もう 1 つは要素の後のテキスト (その後にさらにインライン テキストが続きます) です。このとき、次のようなブロック構造が生成されます。

は、

と表示されます。

Some inline text

followed by a paragraph

followed by more inline text.

对这两个匿名盒子来说，程序员无法像

元素那样控制它们的样式，因此它们会从

那里继承那些可继承的属性，如 color。其他不可继承的属性则会设置为 initial，比如，因为没有为它们指定 background-color，因此其具有默认的透明背景，而 元素的盒子则能够用CSS指定背景颜色。类似地，两个匿名盒子的文本颜色总是一样的。

另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，包含块盒子的盒子会拆分为两个行内盒子，分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹，块盒子后面的行内盒子也是一样。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。

如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。

行内级元素和行内盒子节
如果一个元素的display属性为inline、inline-block或inline-table，则称该元素为行内级元素。显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。

行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（inline formatting context）的创建。行内盒子既是行内级盒子，也是一个其内容会参与创建其容器的行内格式化上下文的盒子，比如所有具有display:inline样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。而通过替换行内级元素或display值为inline-block或inline-table的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。

注意：开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。

在同一个行内格式化上下文中，原子行内级盒子不能拆分成多行：

<style> span {
    display: inline; /* default value*/
}</style>
<div>
    The text in the span
    <span>can be split in several lines as it</span>
    is an inline box.
</div>

可能会显示为：

The text in the span can be split into several
lines as it is an inline box.

而：

<style> span {
    display: inline-block;
}</style>
<div>
    The text in the span
    <span>
    cannot be split in several lines as it
    </span>
    is an inline-block box.
</div>

则可能显示为：

The text in the span 
cannot be split into several lines as it is an
inline-block box.

其中的“cannot be split into several lines as it”永远不会换行。

匿名行内盒子

类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值initial。

一种常见的情况是CSS引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于white-space的设置而被移除，从而导致最终的实际内容为空。

其他类型的盒子

行盒子

行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。

行盒子更多是以技术性目的而存在的，Web开发者通常不需要关心。

Run-in 盒子

Run-in 盒子通过display:run-in来定义，它可以是块盒子，也可以是行内盒子，这取决于紧随其后的盒子的类型。Run-in 盒子可以用来在可能的情况下将标题嵌入文章的第一个段落中。

注意：Run-in 盒子已经在CSS 2.1的标准中移除了，但可能会在CSS 3中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。

由其他模型引入的盒子

除了行内格式化上下文和块格式化上下文之外，CSS还定义了几种内容模型，这些模型同样可以应用于元素。这些模型一般用来描述布局，它们可能会定义一些额外的盒子类型：

• 表格内容模型可能会创建一个表格包装器盒子和一个表格盒子，以及多个其他盒子如表格标题盒子等

• 多列内容模型可能会在容器盒子和内容之间创建多个列盒子

• 实验性的网格内容模型或flex-box内容模型同样会创建一些其他种类的盒子

配置ルール
ボックスが生成されたら、CSS エンジンはボックスを配置してレイアウトを完成させる必要があります。ボックスを配置するときに使用されるルールは次のとおりです。

• 通常のフロー: 各ボックスを順番に配置します。

• フローティング: 通常のピックからボックスを移動します。フローとは別に取り出して、外側のボックスの片側に配置します。

• 絶対配置: 絶対位置に従ってボックスを配置します。その位置は確立された絶対座標に基づきます。システムは計算されているため、絶対に配置された要素が他の要素を覆う可能性があります

通常のフローの紹介

通常のフローでは、ボックスが配置されます続々。ブロック フォーマット コンテキストでは、ボックスは垂直に配置され、インライン フォーマット コンテキストではボックスが水平に配置されます。 CSS の位​​置プロパティが静的または相対で、float が none の場合、レイアウト モードは通常のフローになります。

フローティングの概要

フローティング配置では、フローティング ボックスは現在の行の先頭または末尾にフローティングされます。これにより、要素が clear によって前のフロートをクリアしない限り、通常のフロー内のテキストおよびその他のコンテンツがフローティング ボックスの端に「流れる」ことになります。ボックスの float 値が none ではなく、その位置が静的または相対的な場合、ボックスは float 配置になります。 float が left に設定されている場合、フローティング ボックスはボックスの現在の行の先頭 (左) に配置されます。 right に設定されている場合、フローティング ボックスは現在の行の末尾 (右) に配置されます。箱。左右どちらにフローティングしても、行ボックスはフローティング ボックスのサイズに合わせて伸縮します。

絶対位置決めの概要

絶対位置決めでは、ボックスは現在のフローから完全に削除され、それとの関係がなくなります (注釈: ここでは位置決めと位置計算のみが指定されます)ただし、絶対配置された要素は、ドキュメント ツリー内の他の要素との親子関係または兄弟関係を引き続き持ちます)、その位置は、上、下、左、右を使用して、その要素を含むブロックに対して相対的に計算されます。 。要素の位置が絶対位置または固定の場合、要素は絶対位置に配置されます。

固定位置要素の場合、その要素を含むブロックはビューポート全体です。そのため、要素はビューポートに対して絶対的に配置されるため、スクロールしても要素の位置は変わりません。

以上がCSS の視覚的な書式設定モデルを徹底的に理解する (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。