HTMLのブロックレベル要素と行レベル要素の比較分析

ブロックレベル要素とインライン要素(インライン要素)の比較について

2つの要素の比較

ブロックレベル要素:

• 前後に改行あり

• などの属性を設定できます幅と高さ、およびマージンについては、ボックス モデル

• を参照してください。インライン要素の幅

• のデフォルトは親要素の幅であり、高さは変更できます。コンテンツの高さによって設定または決定されます

インライン要素:

• 前後に改行はありません

• 要素の幅と高さの設定は無効です。 高さは line-height (.設定されていない場合は font-size によって計算されます)。幅が親要素の幅より大きい場合、要素は次の行に分割されます。インライン要素の場合は、水平方向に設定できます。垂直方向の場合、padding と margin の設定は効果があるように見えますが、ブラウザーには影響せず、他の要素のレイアウトには影響しません。

• 他の要素を含めることはできません

• ただし、インライン要素の一部は置換要素 (ブラウザは読み込み時に属性設定に基づいて外観を最終決定します) であり、幅や高さなどの属性を設定できます。 : img, input

ブロックレベル要素とインライン要素間の変換

• 表示を設定: block/inline-block

• 要素をフローティングに設定

• 要素の位置を設定: 相対/絶対/固定

その他 HTML のブロックレベル要素と行レベル要素の比較分析に関する関連記事については、PHP 中国語 Web サイトに注目してください。