HTML ブロックレベルタグ、インラインタグ、インラインブロックタグの表示モードは何ですか?

今回は、htmlブロックレベルタグ、インラインタグ、インラインブロックタグの表示モードとは htmlブロックレベルタグ、インラインタグ、インラインブロックタグの表示モードを使用する際の注意事項についてお届けします。実践的なケースを見てみましょう。

今日の講義では、HTMLにおけるタグの表示形式についてお話しましたが、大きく分けてブロックレベルのタグとインラインタグに分けられます。初心者が初めてタグを使用するとき、幅、高さ、水平方向の中央揃えなど、一部の属性が一部のタグでは機能しないことに気づくでしょう。実際、この属性の使用はブロックレベルのタグでのみ機能します。個人的に初心者が見落としやすい点だと思うので書いてみました！

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

私はブロックレベルのタグです p

私はinline タグ font 実行 プレビュー後、テキストを水平方向に中央揃えにできますが、フォントは中央揃えできません。 次に、上記の問題は HTML の表示モードに関連します:

表示モードの特徴:

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

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

インライン要素: 1 行に複数のラベルが存在でき、幅と高さが影響を受けます。属性値は影響せず、幅と高さはコンテンツに完全に依存します。

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

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

HTML の表示モードは、ブロック レベルとインラインに分かれています。一般的に使用されるブロック レベルは、p、p、h1~h6、ul、li、dl、dt、dd... です。は、span、font、b、u、i、strong、em、a、img、input です。ここで、img と input はインライン ブロック要素です。

それでは、スパンやフォントの幅と高さを制御できないのではないかと考える生徒もいるでしょう。さて、今回は

floating

と位置決めを脇に置いて、

display

属性を介して相互に変換しましょう:

1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;

対応するラベルの display 属性を使用し、対応する値を取得するだけです。相互に変換されました。 text-align 属性が有効かどうかについては前に述べました。その理由は、ブロックレベルのタグで幅が指定されていない場合、ブロックレベルの要素はデフォルトでブラウザの幅、つまり 100% になるからです。 width の場合、100% の幅でセンタリングが有効になります。ただし、インライン要素の幅はコンテンツによって完全に引き伸ばされるため、幅はコンテンツの幅になります。それでは、ブロック レベルを確認します。はボックスの中央に配置されますが、インライン要素の幅のせいで、コンテンツが広く、中央に配置するスペースがないため、フォントが変換された場合は text-align:center は効果がありません。

p{ background:green; color:red; text-align:center;}    
font{background:green;color:red; text-align:center;display:block;}

同様に、ブロックレベルをインラインに変換すると、テキストも中央に表示できなくなります。

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

text-align:center;:

p{ padding:5px;background:green; color:red;}    
font{ background:yellow;}    
<p>    
    <font>我是行内标签font</font> <font>我是行内标签font</font>    
</p>

with text-align:center;

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

の後に見たと思います。このような場合の方法をマスターしてください。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

HTMLの基礎知識、ハイパーリンクで設定するスタイルの詳しい紹介

HTMLの基礎知識CSSスタイルシートとスタイル属性の詳しい紹介

HTMLaタグのhref属性を使用して相対パスと絶対パスを指定します

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