HTML インライン要素とブロックレベル要素、およびそれらの相互変換についての理解_html/css_WEB-ITnose

ブロックレベル要素: div、p (段落)、form (フォーム)、ul (順序なしリスト)、li (リスト項目)、ol (順序付きリスト)、dl (定義リスト)、hr (水平方向)分割線）、メニュー（メニューリスト）、テーブル（表）...

特徴: 1. ブロックレベル要素は排他的な行を占有し、その幅は親要素の幅を自動的に埋めます。

2.幅と高さの属性を設定できます。 （幅を設定しても、float属性など特別な事情がない限り、排他行を占有します）

3. margin（外側のマージン）とpadding（内側のマージン）を設定できます。

インライン要素: span、strong、em、br、img、input、label、select、testarea...

(インライン要素、インライン要素、インライン要素、インライン要素はすべて「インライン」要素を指します) )

特徴: 1. インライン要素は 1 行を占めません。 隣接するインライン要素は、要素の内容に合わせて幅が変わるまで折り返されません。コンテンツによってサポートされる幅)。 2. width属性とheight属性の設定は無効です。方 平 3. Padding-left、padding-right、margin-heft、margin-right は境界線の間隔効果を生成しますが、

垂直方向のpadding-top、padding-bottom、margin-bottomには効果がありません。

可変要素:

コンテキストに基づいて要素がブロックレベル要素であるかインライン要素であるかを判断する必要があります。コンテキストがそのカテゴリを決定すると、ブロックレベル要素またはインライン要素の規則に従います。

CSS:

css は、HTML のデフォルトのレイアウト モードを変更し、ブロックレベルの要素を必要な場所に配置できます。

ブロックレベル要素とインライン要素の基本的な違いは、ブロック要素は通常改行で始まるのですが、CSS制御が追加されるとこの属性の違いは違いになりません。

inline要素

に

display:block

のような属性を追加し、inline要素にも毎回改行から始まる属性を持たせます。

block-level要素にdisplay:inline

属性を追加し、ブロックレベル要素が改行属性を持たないようにする。

inline要素

に

display:inline-block

属性を追加します まだインライン要素ですが、width属性やheight属性などを設定することができます。

(この記事は学習と交換のみを目的としています。異なる意見がある場合は、貴重なコメントを残してください~)