HTMLのタグはブロックレベルのタグとインラインタグに分けられます。
ブロックレベルのタグ機能
1. 独占一行
2.ラッピング可能
3. 幅と高さを設定できます (width:/height:)
4.マージン（マージンとパディング）を設定できます
ラベル
div:ボックス
p: 段落
h1-h6: 見出し
hr: 水平分割線
ul>li: 順序なしリスト
ol>li: 順序付きリスト
dl>dt(ヘッダ)>dd:定義リスト
table>th>tr>td: table (表タイトル キャプション タグ、表ヘッダー thead タグ、表本体 tbody タグを含む)
から: フォーム
インラインタグの機能
1. 単一行を占有せず、他のインラインタグと同じ行に配置されます。
2. 改行なし
3. 幅と高さは設定できず、高さはコンテンツによって拡張されます。コンテンツがない場合、高さは空になります。
4. 外側のマージン (マージン) を左右 (幅) に適用するように設定できますが、上下 (高さ) には適用できません。内側のマージン パディングが有効になります。
ラベル
スパン: ドキュメント内のインライン要素を結合するために使用されます。
a: ハイパーリンク
b/strong: 太字フォント
小: フォントが弱くなる
u: アンダースコア
i/em: ティルト
s/del: 取り消し線
sup/sub: 上付き文字/下付き文字
オーディオ: オーディオ
ビデオ: ビデオ
textarea: 複数行のテキスト ボックス
選択: ドロップダウン メニュー
画像: 画像
ボタン: ボタン
特別なタグ (インライン ブロック タグ: インライン タグに属しますが、幅、高さ、マージンを設定できます:
画像、オーディオ、ビデオ、ラベル、入力、選択、テキストエリア、ボタン
ラベル変換:
インラインラベルはブロックラベルに変換され、幅、高さ、マージンは通常、インラインラベルにdisplay:blockを追加することで設定でき、単一行を占めます。
ブロックレベルのタグをインラインタグに変換し、ブロックレベルのタグにdisplay:inlineを追加します。
display:inline-block をブロック タグに追加するか、インライン タグをインライン ブロック タグに変換するために追加します。
例: ブロックがインラインブロックに変換される
<style>
.box1>div{
width: 50px;
height: 50px;
display:inline-block ;
border: 2px solid seagreen;
}
</style>
<body>
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
———————————————
著作権に関する声明: この記事は、CSDN ブロガー「lingjiaxiaozila」のオリジナル記事であり、CC 4.0 BY-SA 著作権規約に準拠しています。転載する場合は、元のソースのリンクとこの声明を添付してください。
元のリンク: https://blog.csdn.net/lingjiaxiaozila/article/details/126172335