ブロック レベル要素とインライン要素_html/css_WEB-ITnose

HTML要素は2種類に分けられます:

block level要素(ブロックレベル要素)

inline要素(インライン要素)

2つの違いは以下の通りです:

1. ブロックレベル要素独自の行を占めます (変更された要素の表示属性が表示されない限り)、インライン要素は 1 行で表示されます。

2. ブロックレベルの要素は幅と高さの属性を設定できますが、インライン要素に対するこれらの属性の設定は無効です。 ;

3. ブロックレベル要素のデフォルトの幅は 100% ですが、インライン要素の幅はそのコンテンツまたは子要素に基づいて決定されます。

2 つの相互変換:

ブロックレベル要素??>インライン要素: display:inline; インライン要素??>ブロックレベル要素: display:block;

2 つの間間の状態:

要素を外部に対してインライン要素として表示するには、display:inline-block 属性を設定し、内部的にはブロックレベルの要素として表示するには、width 属性と height 属性を設定します。設定することができます。

共通のブロックレベル要素とインライン要素

ブロックレベル要素: div p h1 h2 h3 h4 h5 h6 dl ul ol li table hr (水平分割線)

インライン要素: a img span input (入力ボックス) ) select (項目選択) textarea (複数行テキスト入力ボックス) sub (下付き文字) sup (上付き文字)