HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLブロックレベルとインラインブロック要素（概要）

ブロックレベルの違いについて学ぶ ＆インラインブロック HTMLの要素。

HTMLでは、すべての要素にデフォルトの表示があります すべてのブラウザに組み込まれているユーザーエージェントスタイルシート（UAS）によって継承される値。

表示値のオプションには、ブロックの2つがあります。 およびインライン：

  • CSSでブロック： display：block;
  • CSSのインライン： display：inline-block;

HTML要素の動作またはスタイルは、ブラウザのユーザーエージェントスタイルシート（UAS）から取得されます。 —簡単に上書きできます。したがって、ブロックレベルの要素は、次の簡単な宣言でインライン要素に変換できます。 display：inline-block; —およびその逆。

ブロックレベル要素とは何ですか？

HTMLでは、ブロックレベルの要素 は常に新しい行で始まり（改行のように）、そのコンテナの全幅を占める要素（親要素）です。

したがって、

を追加すると この段落のすぐ下にある要素は、その親要素コンテナの左端から右端までの幅全体を占めます。

コード例：

<div>I’m a block-level element.</div>

結果：

私はブロックレベルの要素です。

わかりました、それが全幅を占めることはわかりません。見やすくするために、境界線を追加しましょう：

<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>

結果：

私はブロックレベルの要素です。

これで、

が表示されます。 要素はコンテナの全幅を占めます。このウェブサイトでは、
を使用しています。 要素。

前述したように、ブロックレベルの要素は新しい行を開始します。コードレベルでどのように表示され、ユーザーの観点からブラウザでどのようにレンダリングされるかを次に示します。

<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>
<div style="border:1px solid #dd4c4f">I’m another block-level element.</div>

外観：

私はブロックレベルの要素です。私は別のブロックレベルの要素です。

2つの

の場合 上記の要素はインラインでした 彼らは同じ線で隣同士に座ります （次のセクションで説明します）。ただし、これらはブロックレベルの要素であるため、レイアウト内の独自の行に配置され、それぞれが親コンテナの全幅を占めます

すべてのHTMLブロックレベル要素

HTMLのブロックレベル要素の完全なリスト：

<アドレス>
連絡先情報。
記事の内容。
コンテンツは別として。
長い（「ブロック」）引用。
開示ウィジェット。
ダイアログボックス。
説明リストで用語を説明します。
ドキュメント分割。
説明リスト。
説明リストの用語。
フィールドセットラベル。
図のキャプション。
メディアコンテンツをキャプション
でグループ化します 。
セクションまたはページフッター。
入力フォーム。

、

、

、

、
、

見出しレベル1〜6。
セクションまたはページヘッダー。
ヘッダー情報をグループ化します。
水平方向のルール（分割線）。


    • リストアイテム。
    メインコンテンツコンテナ。
    ナビゲーションリンクが含まれています。
    注文リスト。

    段落。
    <div style="display:inline-block;border:1px solid #dd4c4f;">
  I’m a inline-block element
</div>

    外観：

    私はインラインブロック要素です。

    インラインブロック要素は改行で始まりません（改行）。

    したがって、コードレベルで2つのインラインブロック要素が隣り合っている場合：

    <div style="display:inline-block;border:1px solid #dd4c4f">
  I’m a inline block element.
</div>
<div style="display:inline-block;border:1px solid #dd4c4f">
  I’m a another inline block element.
</div>

    次に、ブラウザで次のようにレンダリングします：

    私はインラインのブロック要素です。私はインラインの別のブロック要素です。

    そして、インラインブロックとブロックの違いを理解するために、それらを「並べて」比較してみましょう。

    私はインラインのブロック要素です。私はブロック要素です。

    すべてのHTMLインラインブロック要素

    HTMLのすべてのインライン要素のリスト：

    <頭字語>
    <オーディオ> （コントロールが表示されている場合のみ）
    <ボタン>