HTML でさまざまなタイプのボックスのベースラインを決定する方法

今回は、HTML でさまざまなタイプのボックスのベースラインを決定する方法を説明します。HTML でさまざまなタイプのボックスのベースラインを決定するときの 注意事項 は何ですか?実際のケースを見てみましょう。

ボックスのベースラインを決定するためのルール

1.1 インラインブロックのベースラインを決定する

「インラインブロック」のベースラインは、通常のフローの最後の行ボックスのベースラインです。インフロー ライン ボックス、またはその '

overflow' プロパティに 'visible' 以外の計算値がある場合。この場合、ベースラインは bottom margin エッジです。

1.2 置換のベースラインを決定します

bottomマージンエッジ

1.3 インラインのベースラインを決定します

は、それに含まれるテキストのベースラインです

1.4 インラインテーブルのベースラインを決定します

「インラインテーブル」のベースラインは、 table

1.5 OK ブロックのベースライン

各ブロックには通常、多数の要素行が含まれているため、それぞれがラインボックスに対応する多くのベースラインもあります。ラインボックスのベースラインを決定するのは少し複雑です。

1.6 フレックスの決定 - ボックスの各行のベースライン (将来変更が必要になる可能性があります)

連続する最も高いフレックス項目のテキストの最初の行のベースラインを現在のベースラインとして取得します。フレックスボックスのライン

1.7 ラインボックスのベースラインを決定する(より複雑)

まず第一に、他のタイプのボックスとは異なり、CSS 2.1はラインボックスのベースラインの

位置を定義していません。ベースラインは不確実であり、インライン要素のコンテンツやスタイルが変更されると変化します。変更方法の詳細については、2 番目のセクションを参照してください

ラインボックスのベースラインの位置に影響を与える要因は何ですか

ラインボックスと同じ高さの要素が行にある場合

要素はすでに現在の行と同じ高さなので、この中で 要素に設定された

vertical-align 自体には視覚的な効果はありませんが、現在の行ボックスのベースラインの位置に影響します。

異なる垂直方向の整列値を持つ要素が連続して複数ある場合、これらすべての垂直方向の整列値を同時に満たすために、ラインボックスのベースラインの位置も適切な位置に移動されます。位置に応じて、浙江ラインボックスの高さも変更されることがよくあります

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 ！

関連書籍:

HTML で接続をリダイレクトする方法

div タグ内の無効な margin-top 要素の解決策

iframe のサブページを操作して、親ページのページポップアップレイヤー効果

以上がHTML でさまざまなタイプのボックスのベースラインを決定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。