ブロックレベルの書式設定コンテキストを作成するにはどうすればよいですか?ブロックレベルの書式設定コンテキストの役割

CSS のブロックレベルの書式設定コンテキストとは何ですか?ブロック フォーマット コンテキストは、Web ページ上の CSS の視覚的なレンダリングの一部であり、ブロック ボックスのレイアウトを決定するために使用されます。位置決めスキームでは、これは通常のフローに属します。では、ブロックレベルの書式設定コンテキストを作成するにはどうすればよいでしょうか。ブロックレベルの書式設定を作成するための要件は何ですか?この記事では、それを一つずつ説明していきます。

FC (フォーマットコンテキスト) はフォーマットコンテキスト/フォーマット範囲に変換され、ページレイアウト内の領域を指し、独自のレンダリングルールがあり、独自のサブ要素のレイアウト方法と他の要素との関係を決定します。と機能。

CSSの表示分類によれば、xhtml要素はブロック要素、インライン要素、変数要素の3種類に分けられます。ページ要素にスタイルを追加するときは、要素のタイプを知る必要があります。そうすれば、要素のタイプを自分で変換できます。ちょうど、display を使ってインライン要素をブロック要素に変えることができるのと同じです (display: block)。いくつかの特別な要素 img があり、入力はデフォルトで inline-block です

ブロック フォーマット コンテキスト (BFC) とは何ですか?特別領域に相当します。

要素が BFC になるための条件を満たしている場合、その要素は孤立した独立したコンテナーとなり、要素の内部要素は親要素の境界に沿って垂直に配置され、互いの外部要素に影響を与えません。

BFCの発動条件は以下の通りです:

1. 浮動要素、なし以外の浮動小数点値

2. 絶対配置要素、位置(絶対、固定)

3. 表示は以下のいずれかです。インライン - ブロック、表のセル、表のキャプション。 //ブロックレベルのボックスではないブロックコンテナです

4. 表示(hidden、auto、scroll)以外のオーバーフロー値

上記4つの条件のいずれかを満たしていればブロックを作成できます-レベルの書式設定コンテキスト。コンテンツが配置されている環境は、ブロックレベルの書式設定コンテキストの環境です。

CSS3 では、BFC はフロー ルートと呼ばれ、いくつかのトリガー条件が追加されます:

1. 表示のテーブル キャプション値

2 実際、fixed は絶対値のサブクラスです。したがって、CSS2.1 でこの値を使用すると BFC もトリガーされますが、これは CSS3 でより明確になります。

この要素は、IE 固有の CSS 属性を設定します。zoom をトリガーする 1 は、要素のズーム率を設定または取得するために使用されます。値「1」は、要素の実際のサイズを使用することを意味します。 : 1 は hasLayout をトリガーできますが、トリガーできません。要素に他の効果を与える方が比較的便利です。これは IE での状況です

ブロックレベルの書式設定コンテキスト (BFC) の役割:

(1) BFC は余白が折りたたまれるのを防ぎます

折りたたむということは余白が重なることを意味すると理解していますが、あなたのものは私のものであり、私のものはあなたのものであるように、区別は非常に明確になります。

マージンの折り合いに関するルール: 2 つのブロックレベル要素が隣接し、同じブロックレベルの書式設定コンテキスト内にある場合にのみ、それらの間の垂直マージンが重なり合います。つまり、2 つのブロック レベル要素が隣接している場合でも、同じブロック レベルの書式設定コンテキストにない場合、それらの余白は崩れません。したがって、マージンの崩壊を防ぐと、単純に新しい BFC が発生します。

ただし、2 つの隣接する要素の場合はシェルを追加する必要はありませんが、ネストされた要素の場合は親要素を BFC に設定するだけです。こうすることで、子要素のマージンが親要素のマージンと重なってしまうことがなくなります。

(2) BFC には浮動要素を含めることができます

これは、BFC のサブ要素がそのブロックを超えないことを意味しますが、絶対位置を持つ要素はそのブロックの境界を超えることができます

(3) BFC は、要素が浮動要素によって覆われないようにすることができます

これは、各要素のマージン ボックスの左側に基づいて、含まれるブロックの境界ボックスの左側に接触します (左から右への書式設定の場合、それ以外の場合はその逆)。これは浮きがあった場合にも当てはまります。この原理は実現されています。

おすすめ関連記事:

CSS > 翻訳: CSS_html/css_WEB-ITnose のブロックレベルの書式設定コンテキストを理解する

CSS ブロックレベルの書式設定コンテキストを理解する BFC

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

以上がブロックレベルの書式設定コンテキストを作成するにはどうすればよいですか?ブロックレベルの書式設定コンテキストの役割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。