CSS レイアウトの書式設定コンテキスト (FC) タイプとは何ですか?

フォーマットコンテキスト(FC)とは何ですか?書式設定コンテキスト (書式設定コンテキスト) は、サブ要素の配置方法、およびサブ要素の相互作用や他の要素との相互作用を決定する一連のレンダリング ルールを持つページ内のレンダリング領域を指します。 CSSレイアウトで？次の記事では、いくつかの種類の書式設定コンテキストを紹介します。

ブロック フォーマット コンテキスト (BFC):

BFC とは何ですか?ブロック フォーマット コンテキスト (ブロック レベルのフォーマット コンテキスト) は、独立したブロック レベルのレンダリング領域です。この領域には、ブロック レベルのボックスのレイアウトを制約する一連のレンダリング ルールがあり、領域の外側とは何の関係もありません。

BFC制約ルール

1. 内部BOXは垂直方向に次々と配置されます

2. 垂直方向の距離はマージンによって決定されます。 (完全なステートメントは次のとおりです。同じ BFC に属する 2 つの隣接するボックスのマージンは、方向に関係なく重なり合います。)

3. 各要素の左マージンは、それを含むブロックの左境界と接触しています。左から右へ)、浮動要素の場合でも同様です。 (これは、BFC の子要素がその包含ブロックを超えないことを意味しますが、絶対位置を持つ要素はその包含ブロックの境界を超えることができます)。

5、BFC の高さを計算するとき、浮動子要素も計算に参加します。BFC はページ上の独立したコンテナーであり、コンテナー内の子要素は外部の要素には影響しません。 、その逆も同様です。

BFC アプリケーション

margin が重ならないようにします

フローティングによる高さの崩れを防ぎます

margin发生重叠

防止发生因浮动导致的高度塌陷

怎么生成 BFC

• float的值不为none；

• overflow的值不为visible；

• display的值为inline-block table-cell table-caption；

• position的值为absolute或fixed；

display：table也认为可以生成BFC？其实是在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

行内格式化上下文（IFC）：

什么是IFC？IFC(Inline Formatting Contexts)直译为"行内格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)

IFC有的特性

1、IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。

2、IIFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

IFC的应用

1. 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

2. 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

网格布局格式化上下文（GFC）

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

GFC将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了GFC BFC の生成方法

float の値は none ではなく、

overflow の値はvisible ではありません ;

🎜🎜 display の値は inline-block table-cell table-caption; 🎜🎜🎜 position の値は absolute または fixed です。 li>🎜display:table BFC を生成できると思いますか?実際、Table はデフォルトで匿名のテーブル セルを生成し、BFC を生成するのはこの匿名のテーブル セルです。 🎜🎜🎜🎜インライン書式設定コンテキスト (IFC): 🎜🎜🎜🎜 IFC とは何ですか? IFC (Inline Formatting Contexts) は、文字通り「インライン書式設定コンテキスト」と訳されます。IFC のライン ボックス (ワイヤー フレーム) の高さは、それに含まれるインライン要素の実際の最大の高さから計算されます (垂直パディング/マージンの影響を受けません)。 IFCの特徴🎜🎜🎜🎜🎜 1. IFCのラインボックスは通常左右のIFC全体に密着していますが、float要素によって邪魔されます。 float 要素は IFC とライン ボックスの間に配置され、ライン ボックスの幅が短くなります。 🎜🎜2. IIFC にブロックレベル要素を挿入することは不可能です (p に div を挿入するなど)、2 つの匿名ブロックが div から分離されて生成されます。生成されると、各 IFC は外部に公開され、div と垂直に配置されたブロックレベルの要素として表示されます。 🎜🎜🎜IFC の応用🎜🎜

🎜🎜水平方向の中央揃え: ブロックを環境内で水平方向の中央揃えにする場合は、それを inline-block に設定します。 IFC は外側の層で生成され、text-align を通じて水平方向に中央揃えにすることができます。 🎜🎜🎜垂直方向の中央揃え: IFC を作成し、要素の 1 つを使用して親要素の高さを拡張し、その vertical-align:middle を設定します。 >、他の行内 この要素は、この親要素の下で垂直方向の中央に配置できます。 🎜

🎜🎜🎜グリッド レイアウト フォーマット コンテキスト (GFC)🎜🎜🎜🎜GFC (GridLayout Formatting Contexts) は、設定時に文字通り「グリッド レイアウト フォーマット コンテキスト」と翻訳されます。 display の値を要素の grid に渡すと、この要素は独立したレンダリング領域を取得し、それをグリッド コンテナ (グリッド コンテナ) に渡すことができます。 > グリッド項目 (グリッド定義グリッド行 (グリッド行) とグリッド列 (グリッド列) on item) 各グリッド項目 (グリッド項目) 位置とスペースを定義。 🎜🎜GFC は従来のレイアウト モードを変更し、レイアウトを 1 次元レイアウトから 2 次元レイアウトに変更します。簡単に言うと、GFC を使用すると、レイアウトは単一の次元に制限されなくなります。このとき、9マスやパズルなどのレイアウト効果を非常に簡単に実現できます。 🎜🎜🎜🎜アダプティブ フォーマッティング コンテキスト (FFC): 🎜🎜🎜🎜FFC (フレックス フォーマッティング コンテキスト) は、直訳すると、表示値が flex または inline-flex である要素は、アダプティブ コンテナー (フレックス コンテナー) を生成します。 ）。 🎜

フレックスボックスはフレックスコンテナとフレックスアイテムで構成されています。要素の表示プロパティを flex または inline-flex に設定することで、フレックス コンテナーを取得できます。 flex に設定されたコンテナはブロックレベル要素としてレンダリングされ、inline-flex に設定されたコンテナはインライン要素としてレンダリングされます。

フレックスコンテナ内の各子要素はフレックスアイテムです。フレックス項目はいくつでも存在できます。フレックス コンテナの外部およびフレックス プロジェクト内のすべての要素は影響を受けません。簡単に言うと、Flexbox は、フレックス アイテムをフレックス コンテナー内にどのように配置するかを定義します。

アダプティブ フォーマット コンテキスト (FFC) とブロックレベル フォーマット コンテキスト (BFC) の違い:

FFC は BFC に似ていますが、次のような違いがあります:

1 は ::first- をサポートしません。 line と ::first-letter、これら 2 つの擬似要素

2.vertical-align は、Flexbox のサブ要素には影響しません

3。Float 属性と Clear 属性も、Flexbox のサブ要素には影響しません。子要素をドキュメント フローから取り出すことは (ただし、Flexbox では有効です!)

4. 複数列レイアウト (column-*) も Flexbox では無効です。つまり、複数列レイアウトを使用して要素を配置することはできません。 Flexbox 内の子要素 ​​

5. Flexbox の下の子要素は親コンテナーの幅を継承しません

推奨関連記事: CSS_html/css_WEB-ITnose のブロックレベルの書式設定コンテキストを理解する

CSS > インライン書式設定におけるさまざまな高さの計算_html/css_WEB-ITnose

ブロックの書式設定コンテキスト、フローティングおよび絶対配置の仕組みの詳細な説明_html/css_WEB-ITnose

以上がCSS レイアウトの書式設定コンテキスト (FC) タイプとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。