HTMLのインライン要素とブロックレベル要素の違いは何ですか?

今回は、htmlのインライン要素とブロックレベル要素の違いについてご紹介します HTMLのインライン要素とブロックレベル要素を使用する際の注意事項について、実際のケースを見てみましょう。 。

html タグは、インライン要素とブロックレベル要素の 2 つのタイプに分けられます。 まず、インライン要素とブロックレベル要素の概念を理解しましょう:

ブロックレベル要素: 通常、それらは他の要素のコンテナです。リンクされた要素と他のブロック レベルの要素は、同じ行に配置される他の要素を除外します。幅 (width) 属性と高さ (高さ) 属性を設定できます。通常の流れでは垂直に配置されます。共通のブロック要素は「div」です。 インライン要素 (インライン要素): インライン要素は、テキストまたは他のインライン要素のみを収容できます。これらは、他のインライン要素を同じ行に置くことができます。ただし、高さと幅を設定することはできません。一般的なインライン要素は「a」です。

ブロックレベル要素の概念によれば、ブロックレベル要素の前後に改行があることがわかります。これは、要素の前後に 0c6dc11e160d3b678d68754cc175188a タグを追加することと同じです。ブロックレベルの要素はブロックまたは四角形と考えることができるため、ブロックレベルの要素は高さと幅の属性を設定できます

例:

css ファイル:

#div1{  
 width:200px;  
 height:200px;  
 background:#666  
 }  
div2{  
 width:200px;  
 height:200px;  
 background:#F00  
 }

html ファイル:

<div id="div1">  
     div1  
块级元素排斥其他元素与其位于同一行  
</div>  
  <div id="div2">  
     div2  
块级元素排斥其他元素与其位于同一行  
</div>

2 つの div 要素は設定できません同じ行にあります

インライン要素の概念によれば、インライン要素の前後に改行がないことがわかります。インライン要素は線と考えることができるため、高さと幅の属性を設定することはできません。

ブロック要素タグ

address - アドレス

blockquote - ブロック引用符

center - 中央揃え

dir - ディレクトリリスト
div - よく使用されるブロックレベルはCSSレイアウトのメインタグでもあります
dl - 定義リスト
fieldset - フォームコントロールグループ
フォーム - インタラクティブフォーム
h1 - 見出し
h2 - サブタイトル
h3 - レベル 3 の見出し
h4 - レベル 4 の見出し
h5 - レベル 5 の見出し
h6 - レベル 6 の見出し
hr - 水平区切り線
isindex - 入力プロンプト
menu - メニューリスト
noframes - フレームのオプションのコンテンツ (このブロックのコンテンツはフレームをサポートしていないブラウザーに表示されます)
noscript - オプションのスクリプトのコンテンツ (このコンテンツはスクリプトをサポートしていないブラウザーに表示されます)
ol - ソートされたフォーム
p - 段落
pre - フォーマットされたテキスト
table - table
ul - 未ソートリスト

inline要素（インライン要素）

a - アンカー

abbr - 略語

頭字語 - 最初の単語

b - 太字（非推奨）
bdo - bidi override
big - 大きなフォント
br - 改行
cite - quote
code - コンピューターコード (ソースコードを引用する場合に必要)
dfn - フィールドの定義
em - 強調
font - フォント設定(非推奨)
i - イタリック
img - 画像
input - 入力ボックス
kbd - キーボードテキストを定義
label - テーブルラベル
q - 短い引用符
s - アンダースコア
samp - サンプルコンピュータコードを定義
select - 項目選択
small - 小さなフォントテキスト
span - 一般インラインコンテナを使用し、テキスト内のブロックを定義します
strike - 下線
strong - 太字強調
sub - 下付き文字
sup - 上付き文字
textarea - 複数行 テキスト入力ボックス
tt - タイプライターテキストの定義
var -
変数の定義

これらの事例を読んだ後は、その方法をマスターしたことになります。さらに興味深い内容については、php 中国語 Web サイトの他の関連記事に注目してください。 HTML でローカル システム時刻を取得する

画像のみを表示するためにタグ内の他の属性を設定および非表示にする方法

以上がHTMLのインライン要素とブロックレベル要素の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。