BFC と IFC_html/css_WEB-ITnose

私たちが作成する Web ページで最も重要なことの 1 つは、通常、ブロックレベルの書式設定コンテキストであり、ブロックレベルのボックスのみが関与します。 -level ボックスが配置されることは、この領域の外側とは何の関係もありません。

私は今、毎日ウェブページを作成していますが、以前は BFC と IFC の原則にあまり注意を払っていなかったので、作成したウェブページは少し偏っていました。そのため、以下の知識を深く学ぶ必要があります。

bfc: 内部のサブ要素が外部の要素に影響を与えないことを意味します
オーバーフローを追加します: hilden この要素のサブ要素は bfc の下にあります
トリガーが bfc である限り、効果はありません外側に。
1.ブロックレベルのボックス: ブロック、リスト項目、テーブルの表示属性を持つ要素はブロックレベルのボックスを生成します。そして、ブロックの書式設定コンテキストに参加します。

2.inline-level box: inline、inline-block、および inline-table の表示属性を持つ要素は、インラインレベルのボックスを生成します。そして、インライン書式設定コンテキストに参加します。

ブロックレベル要素は通常、ブラウザ内で垂直にレイアウトされ、ブロックレベル要素間の間隔を制御するためにマージンを使用できます。並列ブロックレベル要素とネストされたブロックレベル要素の両方に外部マージンがあります。それが証拠金結合問題です。

インライン要素は水平にレイアウトされ、垂直マージンとパディングは無効になり、設定された幅と高さも無効になります。

いくつかのレイアウト規則もあります:

1. 内部ボックスは垂直方向に次々と配置されます。
2. ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います
3. 各要素のマージン ボックスの左側は、それを含むブロック境界ボックスの左側に接します (左から右への書式設定の場合、それ以外の場合はその逆)。これは浮きがあった場合にも当てはまります。
4. BFC エリアはフロート ボックスと重なりません。
5. BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素には影響しません。およびその逆。
6. BFC の高さを計算するとき、浮動要素も計算に参加します

そして、IFC は「インライン書式設定コンテキスト」であり、IFC のライン ボックス (ワイヤー フレーム) の高さは、実際の高さの中で最も高いものによって計算されます。これに含まれる inline 要素が登場します

1. IFC の行ボックスは通常、IFC の左右全体に密着していますが、float 要素によって邪魔されます。 float 要素は IFC とライン ボックスの間に配置され、ライン ボックスの幅が短くなります。
2. 水平方向の中央揃え: ブロックを水平方向の中央揃えにする場合、それを inline-block に設定すると外側のレイヤーに IFC が生成され、text-align を使用して水平方向の中央揃えが可能になります。
3. 垂直方向の中央揃え: IFC を作成し、要素の 1 つを使用して親要素の高さを拡張し、他のインライン要素をこの親要素の下に垂直方向の中央揃えに設定できます。

同じ ifc の下にある複数の行ボックスの高さは異なります。 IFC 内にブロック レベルの要素を含めることはできません。ブロック レベルの要素が挿入されると (p に div を挿入するなど)、div から分離された 2 つの匿名ブロックが生成されます。つまり、2 つの IFC が生成されます。 、各 IFC は外部に対してブロック レベルとして表示され、div と垂直に配置されます。