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 行に複数のラベルが存在でき、幅と高さの属性値は完全に影響しません。内容的には！

2 つのモードの利点を組み合わせた表示モードもあります:

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

HTML の表示モードは、ブロック レベルとインラインに分けられます。一般的に使用される

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

それでは、スパンやフォントの幅と高さを制御できないのではないかと考える生徒もいるでしょう。はい、今回はフローティングと配置を脇に置いて、display 属性を介して相互に変換しましょう:

1. ブロックレベルのラベルをインラインラベルに変換します: display:inline; 2. インラインラベルをブロックに変換します。レベルタグ: 表示: ブロック;

3. インラインブロックタグに変換: 表示: inline-block;

対応するタグの表示属性を使用し、対応する値を取得する限り、表示モードを次のように変換できます。お互い。

text-align 属性が有効かどうかについては前に述べました。その理由は、ブロックレベルのタグ

が幅

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

つまり、ブロックレベルは次のとおりです。ボックスは中央に配置されますが、インライン要素の幅がコンテンツの幅であるため、中央に配置するスペースがないため、text-align:center;効果はありません。ただし、フォントがブロック レベルに変換される場合は異なります。

コンテンツをクリップボードにコピーします

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;}

XML/HTML コード

コンテンツをクリップボードにコピー

<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 サイトの他の関連記事を参照してください。