HTML ブロックレベルタグのインラインタグの表示モード

HTMLにおけるタグの表示形式について、大きく分けてブロックレベルのタグとインラインタグに分けられることをどれくらい知っていますか？初心者が初めてタグを使用するとき、幅、高さ、水平方向の中央揃えなど、一部の属性が一部のタグでは機能しないことに気づくでしょう。実際、この属性の使用はブロックレベルのタグでのみ機能します。そこでこの記事では、HTML のブロックレベルタグとインラインタグの表示モードについて詳しく紹介します。

たとえば、p タグの水平方向の中央揃えは機能するが、フォントに水平方向の中央揃え属性を追加しても効果がない状況があります (次のように):

p{ color:red; text-align:center;}
<
BR
>
font{color:red; text-align:center;}

<p>我是块级标签p</p><BR><font>我是行内标签font</font>

プレビューを実行した後、p はテキストを水平方向の中央揃えにできますが、フォントは (以下のように) できません):

そして、上記の問題は HTML の表示モードに関連しています:

表示モードの特徴:

主に 2 つのカテゴリに分けられます:

ブロック レベル要素: は排他的な行を占有し、幅と高さの属性値に影響します 幅を指定しない場合 、ブロック レベルの要素はデフォルトでブラウザの幅になります。 これは 100% 幅です

インライン要素: 1 行に複数のラベルが存在でき、幅と高さの属性値は完全に影響しません。内容的には！

インライン ブロック要素: インライン レベルとブロック レベルの利点を組み合わせると、幅と高さの属性値に影響を与えるだけでなく、複数のラベルを 1 行に表示

ブロック レベル は、p、p、h1~h6、ul、li、dl、dt、dd です。 ... 一般的に使用される inline には、span、font、b、u、i、strong、em、a、img、input があります。ここで、img と input はインライン ブロック要素です。

を指定しない場合、ブロックレベルの要素はデフォルトでブラウザの幅 になるからです。つまり、100% 幅 の場合、センタリングは 100% 幅で有効になります。ただし、インライン要素の幅はコンテンツによって完全にサポートされるため、幅はコンテンツの幅になります。

p{ align:center;} font{background:green; color:red; text- align:center;display:block;} 同様に、ブロックレベルがインラインに変換される場合、文字を中央に表示することはできません。

HTML では、インライン要素はテキストの特性を持つラベルとみなされ、ブロック レベルのインライン ラベルはテキストの特性とみなされるため、ブロック レベルで text-align:center を使用します。 ;、内部のインライン タグは、テキストのようにブロック レベルのタグ内で水平方向に中央揃えになります:

1. text-align:center; を使用しない場合:

2. XML/HTML コード

p{ padding:5px;background:green; color:red;}    
font{ background:yellow;}

<p>
    <font>我是行内标签font</font> <font>我是行内标签font</font>
</p>

text-align:center; を追加します。

1. p{ padding:5px;background:green; color:red;text-align:center;}    
   font{ background:yellow;}

   ログイン後にコピー

   

   这次主要是讲一下html中显示模式的特性，如果本文对您有帮助，记得推荐一下哦！

   相关推荐：
   

   css的显示模式display记录笔记

   以上がHTML ブロックレベルタグのインラインタグの表示モードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。