Web ページのレイアウトにおけるインライン書式設定コンテキスト (IFC) の合理的な使用_html/css_WEB-ITnose

はじめに: 小さなテスト質問をさせてください。CSS を使用して、指定された領域内のコンテンツを次のように適応的に垂直方向に中央揃えする方法を説明します。

昔、それを行うためのあまり確実ではない方法がありました。

display:table-cell 属性は、td タグと同様に、label 要素がテーブル セルの形式で表示されることを意味します。

実際、私が心の中でこの方法を嫌う理由はたくさんあります

たとえば、高度なブラウザはこの属性をサポートしていますが、低レベルのブラウザは「ごめんなさい」としか言えません。 「補助処理」に対するフォント サイズなど、他のさまざまな不正確な属性を使用する必要があるため、さまざまな機会に予期しないバグが発生する傾向があります。新しい機能と古い機能の両方で問題を解決できる場合、誰もが普遍的で安定性の高いものを選択すると思います。

例えば、テーブル時代を経験したシージエンジニアは、テーブルに関係する人々のことを考えると非常に嫌悪感を抱きます。

それでは、どうすればもっと合理的になるでしょうか? …………この長いブログを辛抱強く読んでください。

本題に入りましょう。

抽象的なものですが、これは IFC: インライン フォーマット コンテキスト (インライン フォーマット コンテキスト) と呼ばれます。

IFC に対応するのは BFC: ブロック フォーマット コンテキスト (ブロックレベル フォーマット コンテキスト) です。 Web レイアウトのアプリケーション シナリオは非常に豊富であり、それを理解すれば、多くのバグの原因を理解し、自分で解決策を見つけることができます。でも、このブログは彼について語ることが目的ではないので、たとえ彼のことを話して、話したい気持ちがたくさんあったとしても、それは次回にとっておかなければなりません。

IFC は BFC と同じです。要素や属性ではなく、環境、コンテキスト、レイアウト機能です。

w3c からの引用 (http://www.w3.org/TR/CSS2/visuren.html#inline-formatting)

インライン書式設定コンテキストでは、ボックスは上から順に水平にレイアウトされます。これらのボックス間では、水平方向のマージン、境界線、およびパディングが考慮されます。ボックスはさまざまな方法で垂直方向に整列されます。ボックスの底部または上部が整列されるか、ボックス内のテキストのベースラインが整列されます。ラインを形成するボックスを含むものは、ライン ボックスと呼ばれます。

ライン ボックスの幅は、含まれるブロックとフロートの存在によって決まります。 ライン ボックスの高さは、セクションで示されているルールによって決まります。ラインの高さの計算

ライン ボックスは、その中に含まれるすべてのボックスに対して常に十分な高さになります。ただし、その中に含まれる最も高いボックスよりも高くなる場合があります (たとえば、ベースラインが揃うようにボックスが整列している場合)。ボックス B の高さが、それを含むライン ボックスの高さより小さい場合、複数のインライン レベルのボックスが 1 つのボックス内に水平に収まらない場合、ライン ボックス内の B の垂直方向の配置が 'vertical-align' プロパティによって決定されます。行ボックスでは、行ボックスは垂直方向に積み重ねられた 2 つ以上の行ボックスに分散されます。したがって、段落は行ボックスが垂直方向に分離されずに積み重ねられ、重なり合うことはありません。一般に、ライン ボックスの左端はそのブロックを含むブロックの左端に接し、右端はそのブロックを含むブロックの右端に接触します。ただし、フローティング ボックスは、そのブロックを含むブロックの端とライン ボックスの端の間に入る場合があります。同じインライン書式設定コンテキスト内の行ボックスは通常、同じ幅 (包含ブロックの幅) を持ちますが、浮動小数点により利用可能な水平スペースが減少した場合、幅が異なる場合があります。同じインライン書式設定コンテキスト内の行ボックスは、通常、高さが異なります。 、ある行には縦長の画像が含まれ、他の行にはテキストのみが含まれる場合があります)。

行上のインラインレベルのボックスの合計幅が、それらを含む行ボックスの幅より小さい場合、行ボックス内の水平方向の分布'text-align' プロパティによって決定されます。そのプロパティの値が 'justify' である場合、ユーザー エージェントはインライン ボックス内のスペースや単語も引き伸ばすことができます (ただし、インライン テーブル ボックスやインライン ブロック ボックスは引き伸ばすことはできません)。インライン ボックスがライン ボックスの幅を超える場合、インライン ボックスは複数のボックスに分割され、インライン ボックスが分割できない場合 (たとえば、インライン ボックスに 1 つの文字または言語固有の単語が含まれる場合)、これらのボックスは複数のライン ボックスに分散されます。ルールに違反すると、インライン ボックス内のブレークが禁止されたり、インライン ボックスがnowrap または pre) の空白値の影響を受ける場合、インライン ボックスはライン ボックスからオーバーフローします。

インライン ボックスが分割されると、マージン、境界線が表示されます。 、およびパディングには、分割が発生する場所 (または、複数の分割がある場合は任意の分割) での視覚効果はありません。

双方向テキスト処理により、インライン ボックスは同じ行ボックス内の複数のボックスに分割される場合もあります。

ライン ボックスは、インライン書式設定コンテキスト内にインライン レベルのコンテンツを保持するために必要に応じて作成されます。ライン ボックスには、テキスト、保持された空白、ゼロ以外のマージン、パディング、境界線を持つインライン要素、その他のインライン要素が含まれません。フロー コンテンツ (画像、インライン ブロック、インライン テーブルなど) であり、保存された改行で終わっていないものは、内部の要素の位置を決定する目的で高さ 0 の行ボックスとして扱われ、次のように扱われなければなりません。他の目的のために存在するものではありません。

英語で読んでいる多くのヤリ シャンダの個人的な理解と要約の後、翻訳と理解は次のとおりです (北東部の方言と長いスピーチをお許しください):

IFC では、インライン要素は次のとおりです。水平方向に順番に並べる このうち、水平方向のマージン、パディング、コンテナ間の境界線が使いやすいです。下または上に揃えたり、ベースラインに揃えたりするなど、さまざまな方法で垂直方向に揃えることができます。それらを並べた後にできる正方形の領域をラインボックスと呼びます。

ラインボックスの幅は、それを含む要素の幅と、それを含む要素にfloat要素があるかどうかによって決まり、高さは、内部要素の中で実際の高さが最も高い要素によって計算されます。

//実際、この文は、インライン要素が垂直方向のパディングやマージンなどを設定できない理由を説明しています。設定されていても、行ボックスの高さには影響せず、ブラウザごとに動作が異なる可能性があるためです。ほとんどの場合、望ましい結果は得られません。

ライン ボックスの高さは、その中にコンテナを含めるのに十分な高さであるか、またはその中に含まれるコンテナの高さよりも高い場合があります (ベースラインが揃っている場合など)。ラインボックスよりも小さい 高さが高い場合、内部コンテナの垂直位置はそれ自体の垂直属性によって決まります。 1 つのライン ボックスに収まらない数のコンテナ ボックスがある場合、折り畳むと 2 つ以上のライン ボックスになります。ライン ボックスは垂直方向に分離できず、重なり合うことはできません。

一般に、ライン ボックスの左端はそれを含む要素の左端の隣にあり、右端はそれを含む要素の右端の隣にあり、浮動要素は間にあります。したがって、同じ IFC の下にあるライン ボックスの幅 (つまり、それらを含むコンテナの幅) は同じですが、ライン ボックスの利用可能な幅も異なります。浮遊要素の破壊による変化とは異なります。同じ Ifc 内のライン ボックスの高さも異なります (たとえば、ライン ボックスに大きな画像がある場合、その高さも高くなります)。

個人的な追加:

ラインボックスの写真 (写真を見せる機会をとってください):

ラインボックス内のインライン要素の幅の合計がこのラインボックスの幅より小さい場合、この行ボックス内の幅は text-align 属性によって決まります。この属性が「justify」に設定されている場合、これらのボックスは残りのスペースに拡張できます (inline-table 要素と inline-block 要素を除く)。 //両端を揃えるのと同様の効果を実現しますが、すべてのブラウザがこれをサポートしているわけではありません。

インライン要素の幅が行ボックスの幅を超える場合、この要素内のコンテンツが折り返せない場合、たとえば単語が 1 つしかない場合、または空白が存在する場合、要素は折り返されて複数の行ボックスに分割されます。 nowrap/pre が設定されています。そうすると、インライン要素がラインボックスからはみ出します。

インライン要素が分割される場合、分割時のマージン、境界線、パディングには視覚効果はありません (複数の行ボックスがある限り、他の分割でも)。

行ボックスの存続条件は、行ボックスが IFC 内にあり、インライン レベルの要素が含まれていることです。行ボックス内にテキスト、空白、改行、インライン要素がなく、IFC 内に他の要素が存在しない場合です。環境 ( inline-block 、 inline-table、images など) は高さ 0 として扱われ、無意味なものとして扱われます。

補足: IFC 環境では、ブロック レベルの要素が IFC に挿入されると、IFC は破棄され、ブロック レベルの要素より前の要素とブロック レベルの後の要素は存在できません。要素はそれぞれ、それらを囲む匿名コンテナーを自動的に生成します。この匿名コンテナーの内部環境が新しい IFC になります。

例 1:

P はブロック要素であり、5 つのインライン要素が含まれており、そのうち 3 つは匿名です。

匿名: 「いくつか」

EM: 「強調された言葉」

匿名: 「出現」

STRONG: 「この中に」

匿名: 「文、親愛なる。」

このコードでは、行ボックス内ここでは、インライン要素が 5 つあり、P はライン ボックスを含むコンテナ ボックスを作成します。

このPの幅が十分であれば、独自のラインボックスが生成されます。以下に示すように:

P の幅が十分でない場合は、複数の行ボックスに分割されます。以下に示すように:

例 2:

1.margin は、強調される前と単語の後の水平方向の役割を果たします。分割点には影響がなく、垂直方向にも影響しません。

2.パディングは強調された単語の前と後の水平方向に機能します。分割点には影響がなく、垂直方向にも影響しません。

3.border、点線の表現を見てください。

上記の説明の後、ブログを始める問題に戻ります。要素内のサイズ不明のテキスト/要素/画像を垂直方向の中央に配置します。

上で述べたように:

ライン ボックスでは、それに含まれる内部コンテナの高さがライン ボックスの高さよりも小さい場合、内部コンテナの垂直位置は、それ自体の垂直属性によって決定されます。
次に、IFC 環境を手動で作成し、行ボックスの高さを包含ブロックの高さの 100% にし、行ボックス内の要素でvertical-align: middle を使用すると想像してみましょう。垂直方向のセンタリングを実現します。

ラインボックスの高さは、内部要素の中で実際の高さが最も高い要素から計算されます。
そこで、高さ 100% の inline-block 要素を行ボックスに挿入します。

概念図:

その中で、高度なブラウザは、内部的に疑似要素を追加するために外側の包含レイヤーの after を直接使用できます。ブラウザは :after の記述方法をサポートしていないため、HTML テンプレート内に空の要素を作成し、その高さを含むレイヤーと同じ 100%、幅を 0、コンテンツを空に設定します。内部でAラインボックスに拡張できますが、スペースを取りません。次に、それ自体内の他の要素を、inline または inline-block に変換することで、ライン ボックス内で垂直方向の中央に配置できます。表現形式は、外側の包含層の垂直方向の中央に配置されます。

コードは次のとおりです:

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>IFC应用实例</title>    <meta name="copyright" content="www.ohweb.cn" />    <meta name="author" content="weinan" /></head><body>    <style>    /* comm 核心部分 */    .g-ifc-wrap:after,    .g-ifc-wrap-after{content:'';height:100%;width:0;display:inline-block;*display:inline;*zoom:1;margin-left:-5px;font-size:0;vertical-align:middle;}    .g-ifc-item{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}    /* test */    #test{height:300px;width:500px;background-color:#878787;border:3px solid #526f39;}    #test p{background-color:#7ff30a;color:#000;font-weight:bold;}    </style>    <div id="test" class="g-ifc-wrap">        <p class="g-ifc-item">我想要基于外面的容器居中</p>        <img class="g-ifc-item lazy"  src="/static/imghwm/default1.png"  data-src="http://dh2.kimg.cn/v/upload/20140325/9aa6e7f4e477d9af9c463c5604070ed4.jpg?v=1395739057"  alt="我也是" />        <!--[if lte IE 7]><span class="g-ifc-wrap-after"></span>< ![endif]-->    </div></body></html>

式は次のとおりです:

Chrome およびその他の高度なブラウザ:

IE6:

まとめ:

原理を理解した後IFC の詳細を説明すると、これを適用して、より自信を持ってさまざまな作業を行うことができます。

たとえば、一部の Web サイトでは、バグだらけのレイアウト方法であるフロートを放棄し、レイアウトに IFC 環境を使用します (もちろん、非常に正確な場合は、インライン レベルの要素間のギャップを解決することも必要です)。 。

または、画像とテキストの中央揃え、高さの適応など、いくつかの柔軟な効果を実現することもできます。

同時に、ウェブページにバグがある場合、オンラインで「万能薬」を探すのではなく、その理由を理解し、良い解決策を考えることもできます。これにより、Web ページをより詳細に制御できるようになります。

????????????END