HTML インライン要素と HTML ブロックレベル要素の概要と違い

ブロックレベル要素の機能:
• 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい行に表示される必要があります。
•幅、高さ、パディング、マージンをすべて制御できます。

インライン要素のプロパティ:
• 隣接するインライン要素と同じ行に配置する
• 幅 (width)、高さ (height)、内側余白の上/下 (padding-top/padding-bottom)、外側余白の上/下 (margin-top/margin-bottom)、つまり内部のテキストや画像のサイズは変更できません。

主なブロックレベル要素は次のとおりです。

コードをコピー

コードは次のとおりです。

アドレス、blockquote、center、dir、div、dl、fieldset、form、h1、h2、h3、h4、h5、h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

主なインライン要素は次のとおりです。

コードをコピー

コードは次のとおりです。

a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、
テキストエリア、tt、u、var

可変要素（コンテキストに基づいて要素がブロック要素かインライン要素かを判断する） :

コードをコピー

コードは次のとおりです。

アプレット、ボタン、del、iframe、ins、マップ、オブジェクト、スクリプト

CSS におけるブロックレベル要素とインライン要素の適用:
CSS を使用すると、上記の表の HTML タグ分類の制限を取り除き、さまざまなタグ/要素に必要な属性を自由に適用できます。

主に使用される CSS スタイルは次の 3 つです。
•display:block -- ブロックレベル要素として表示
•display:inline -- インライン要素として表示
• dipslay:inline-block -- インラインブロック要素として表示され、同じ行に表示され、幅、高さ、内側と外側の余白などのプロパティを変更できます。多くの場合、display:inline-block スタイルを <ul> 要素に追加して、元々垂直なリストを水平に表示できるようにします。

話題外: 最近、ブロックレベル要素とインライン要素の違いについて知識を整理しました。インターネットで関連記事をたくさん見つけましたが、みんなの理解が間違っているようでした。自分でテストしてみたところ、多くの問題が見つかりました:
1. インライン要素の margin-left / margin-right と padding-left / padding-right を制御できるため、この 4 つのプロパティによってインライン要素の幅を制御できます。
2. ブロックレベル要素タグはインライン要素内にも配置でき、内部のブロックレベル要素タグは外部のインラインタグを拡張するため、ブロック要素を配置することでインライン要素の高さを制御できます（インライン要素にはテキストと他のインライン要素のみを保持できるとインターネット上で紹介されています）
例えば：

コードをコピー

コードは次のとおりです。

<あ>
<div style="width:100px;height:100px;">テスト</div>
</a>

<<: CSS での配置の使用方法の詳細な研究 (要約)

>>: http-proxy-middlewareを使用してNodeでプロキシクロスドメインを実装する方法と手順