序文

HTML タグにはさまざまな種類があり、一般的なタグは<div>、<p>、<li>などです<img>。<span>

通常、CSS はこれらのタグを流動的なレイアウトのニーズに合わせて、ブロックレベル要素とインライン要素 (インラインレベル要素) の 2 つのカテゴリに分類します。

CSS はもともと Web ページのグラフィックレイアウトを解決するために生まれたため、タグはレイアウトのニーズに応じて 2 つのカテゴリに分けられ、ブロックレベル要素は構造を担当し、インライン要素はコンテンツを担当します。

ブロックレベル要素

ブロックレベル要素(block-level element)は「構造を担当するために使用される」もので、縦に表示され、幅は自動的に埋められ、幅と高さを設定できます。一般的なブロックレベルの要素には、div、h1 ~ h6、p、ol、ul、li などがあります。

ここに特別な説明があります：

display: block の要素はブロックレベルの要素ですが、ブロックレベルの要素が display: block; であることを意味するものではありません。

例:<li>ラベル表示のデフォルト値は list-item で、<table>ラベル表示のデフォルト値は table です。しかし、それらはすべてブロックレベルの要素です。

ブロックレベル要素には行折り返し機能があるため、clear 属性と組み合わせてフローティングをクリアできます。

    .clear:after { 
        content: ''; 
        display: table; // 也可以是 block，最好不要是 list-item 
        clear: both; 
    }

なぜリスト項目であってはならないのですか?

display: list-item; は主に互換性が悪く、IEブラウザが対応していないため、

また、表示される追加の箇条書きについては、line list-style: none; を追加する必要があります。

インライン要素（インラインレベル要素）は「コンテンツ用」の場合、横に並べて表示され、幅は自動で縮小され、幅と高さは設定できません。一般的なインライン要素は、a、span、b、u、label、em などです。

ここでも特別な説明が必要です:

inline 要素についても同様で、表示が inline 要素は inline 要素ですが、ブロックレベル要素が display: inline; であることを意味するものではありません。

display は inline-block と inline-table はどちらもインライン要素です。

例: ボタン、その表示のデフォルト値は inline-block です; これはインライン要素です。

これでこの記事は終わりです

他のアイデアがある場合は、コメント欄でお知らせください。