CSS インライン レイアウトの実践概要_html/css_WEB-ITnose

まえがき

通常、要素を一列に配置するには、float を使用してから float をクリアするのが一般的な方法です。
以下の通り:

ただし、垂直方向の中央に配置したい場合は、青または緑のブロックの位置を手動で調整する必要があり、より面倒です。

または別の方法、インラインブロックまたはインライン (つまり IFC) を使用します。ここで落とし穴に遭遇しました。

関連css

IFC (インライン書式設定コンテキスト) インライン書式設定コンテキスト、それが何であるかわかりません。
主に IFC 内のレイアウトの CSS に影響します

• font-size
• line-height
• height
• vertical-aligin

line-box

によると、表示領域である line box モデルブロック コンテナーを使用すると、各行の複数のインライン レベル要素が結合してライン ボックス モデルを生成します。

font-size

テキストタイプノードのサイズを指定するために使用される共通属性。 IFC の多くの属性の値はこれに基づいています。

line-height と height

Line-height は w3c でより明確に定義されています:

コンテンツがインラインレベルの要素で構成されるブロックコンテナー要素では、「line-height」はその中の行ボックスの最小の高さを指定します。最小の高さは、ベースラインより上の最小の高さと、その下の最小の深さで構成されます。

複数のインライン要素で構成されるブロック コンテナー内で、'line-height' はインライン要素のライン ボックス モデルの最小高さを指定します。

この最小高さは、ベースラインより上の最小高さとベースラインより下の最小深さで構成されます。

盗んだ写真で説明すると、上から下の 4 つの線は、トップ ライン、ミドル ライン、ベースライン、ボトム ラインです。

次に、行の高さは、コンテキストの現在の行のベースライン間の垂直距離、つまり、画像内の 2 本の赤い線の間の垂直距離を指します (実際、数値的には、行の高さは 2 つの赤い線の間の距離にも等しくなります)他の同色）。

別の考え方を使って、下降傾向を理解してみましょう。

実際、多くの場合、コンテナーには 1 つの行、つまりベースラインが 1 つだけあります。この間隔を確保するために行の高さはどのように計算されますか?

青色の範囲です。コンテナと境界線はAラインボックスです。インライン要素内のテキスト。

つまり、

line-height > font-size の場合

高さを設定したコンテナを行の高さに設定すると、インラインメタコンテンツの上部と下部は 2 つの空白コンテンツの高さを増加します。コンテナの高さも line-height と等しくなるように拡張されます。

a1 + b1 +c1 == line-height & a1 == c1

コンテナの高さが設定されている場合、コンテナの下境界線を越えた部分はレイアウトに影響を与えません。

line-height

コンテナの高さを指定しない場合はコンテナの上下が潰れますが(marginが負の値の場合と同様)、上記の式はまだ保持しています。

a1 (負の値) + b1 + c1 (負の値) == line-height & a1 == c1

以下に示すように:

白は折りたたまれた部分 (つまり、a1 と c1)、赤はコンテナが overflow:hidden に設定されている場合は、赤い部分のみが表示されます。

コンテナの高さが指定されている場合、

height > の場合、黄色の線が下に移動し、赤い部分がさらに表示されます。

height

ここで何が起こるかというと、

コンテナの高さ height > line-height > font-size を決定します

vertical-align

垂直方向の整列ライン、デフォルトは Baselien、W3C 定義による :

このプロパティは、インライン レベルの要素によって生成されるボックスのライン ボックス内の垂直方向の位置に影響します。

vertical には、いくつかの特定の値があるか、値を指定します。

<br /><br /><p class="a1">  <span style="vertical-align:60px;">English中文  </span>  <span>中文English  </span></p>

最初のスパンでは、以下に示すように 60px の垂直オフセットを設定します。

このうち、黄色の線がベースラインで、緑色の線と黄色の線の間隔は 60px です。

ここでは、コンテナ (青) の高さが増加していることがわかります。

コンテナの高さ height = line-height +vertical-align

同様に、コンテナの高さを指定した場合、高さは変更されず、超過した分はレイアウトに影響しません。 overflow:hidden が設定されている場合、余分な部分は表示されません。

vertical-align のその他の特殊な値は、コンテナの高さに応じて変化する相対値とみなすことができます。

結論

インライン レベルの要素とインライン レイアウトの属性を上手に使用して、垂直方向と水平方向の中央揃え効果を非常に迅速に実現し、優れた保守性と拡張性を実現します。

リファレンス

W3C IFC

W3C line-heightとvertical-aligin

line-heightの詳細説明