HTMLのインライン要素とブロックレベル要素とは何か、またそれらの違いは何ですか

以前の就職面接で面接官が尋ねた質問を覚えています。「インライン要素とは何ですか。ブロックレベル要素とどう違うのですか。」これは非常に基本的な面接の質問ですが、多くの初心者は通常、タグのセマンティクスのみに焦点を当て、タグのインラインおよびブロックレベルの特徴を無視します。そのため、上記の質問に答えられないか、不完全な答えになる可能性があります。

HTML の一般的なインライン要素は次のとおりです。

<br>、<b>、<strong>、<sup>、<sub>、<i>、<em>、<del>、<u> などのテキスト要素もあります。

<span> と <img> だけに答えるのは無理があります。

HTML の一般的なブロックレベル要素は次のとおりです。

<div>、<table>、<form>、<p>、<ul>、

<h1>......<h6>、<hr>、<pre>、<address>、<center>、<marquee>、<blockquote> など。

<div> だけに答えると無理があります。

では、それらの違いは何でしょうか?

ブロックレベル要素

1. 常に新しい行から開始します。つまり、各ブロックレベル要素は 1 行を占め、デフォルトでは垂直方向下向きに配置されます。

2. 高さ、幅、余白、パディングはすべて制御可能で、設定はマージン効果とともに効果的です。

3. 幅が設定されていない場合、デフォルトは 100% です。

4. ブロックレベル要素には、ブロックレベル要素とインライン要素を含めることができます。

インライン要素

1. 他の要素と一列に並んでいる、つまり、インライン要素と他のインライン要素が水平方向に並んでいる。

2. 高さと幅は制御できず、設定は無効です。コンテンツによって決定されます。

マージンの設定は左右に有効で、マージン効果があります。

上部と下部のマージンを設定すると、スペースは拡張されますが、マージン効果は生成されません (つまり、ボックスモデルの margin-top/bottom には値がありますが、ページにマージン効果はありません)。

左と右にパディングを設定すると効果的ですが、上と下にパディングを設定するとスペースは広がりますが、マージン効果は得られません (上記と同じ)。

パディング効果は以下のようになります。

<!DOCTYPE html>
<html>
   <ヘッド>
      <メタ文字セット="UTF-8">
   </head>
	<スタイル>
		スパン{
			border:1px 赤一色;
			パディング:10px;
		}
		div{
			border:1px 青一色;
		}
	</スタイル>
   <本文>
	   <div>ブロックレベル要素</div>
	   <span>インライン要素</span>
	   <span>インライン要素</span>
	   <div>ブロックレベル要素</div>
   </本文>
</html>

3. タグセマンティクスの概念によれば、インライン要素にはインライン要素のみが含まれ、ブロックレベル要素は含まれません。

変換

もちろん、ブロックレベル要素とインライン要素間の特性は相互に変換できます。 HTML では、要素をインライン要素、ブロック要素、インラインブロック要素の 3 つのタイプに分類できます。

display プロパティを使用して、これら 3 つを次のいずれかに変換します。

（１）display:inline;インライン要素に変換される。

（２）display:block;をブロック要素に変換する。

（３）display: inline-block; インラインブロック要素に変換します。

インラインブロック要素は、インライン要素とブロック要素の特性を兼ね備えています。

（１）自動的な行の折り返しは行われず、他のインライン要素はすべて水平方向に配置される。

（２）高さ、幅、余白、パディングはすべて制御可能であり、設定はマージン効果とともに効果的である。

（３）デフォルトの配置は左から右です。

以上で、HTML インライン要素とブロックレベル要素とは何か、またその違いについての説明は終了です。HTML インライン要素とブロックレベル要素についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Jenkins の Docker のデプロイとインストール手順

>>: CSS3 で作成した本のページめくり効果