HTML タグの表示モード (ブロックレベル タグ、インライン タグ、インライン ブロック タグ) に関する簡単な説明

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

たとえば、p タグを水平方向に中央揃えすることはできるが、フォントに水平方向の中央揃え属性を追加しても機能しない状況があります (以下を参照)。

プレビューを実行すると、p はテキストを水平方向に中央揃えできますが、font は中央揃えできません (以下に示すように)。

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

表示モードの特性:

主なカテゴリは 2 つあります。

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

インライン要素: 1 行に複数のタグが存在できます。幅と高さの属性値は有効ではありません。幅と高さはコンテンツによって完全にサポートされます。

2 つのモードの一部を組み合わせた表示モードもあります。

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

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

すると、スパンの幅や高さ、フォントを制御できないのかと疑問に思う学生もいるでしょう。はい、それでは今回はフローティングと配置については脇に置いて、display プロパティを通じてそれらを相互に変換することについて話しましょう。

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

2. インラインタグをブロックレベルタグに変換します: display:block;

3. インラインブロックタグに変換します: display: inline-block;

対応するタグの表示属性を使用し、対応する値を取得すれば、表示モードを相互に変換できます。

前に、text-align 属性が有効かどうかについて説明しました。その理由は、ブロックレベル タグで width が指定されていない場合、ブロックレベル要素はデフォルトでブラウザの幅、つまり 100% 幅に設定されるため、 100% 幅で中央揃えになります。ただし、インライン要素の幅はコンテンツによって完全に拡張されるため、 width はコンテンツの幅になります。背景テストを行って確認してみましょう。

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

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

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

text-align:center;がない場合:

text-align:center; を追加した後

今回は主にHTMLにおける表示モードの特徴についてお話します。この記事がお役に立てば、ぜひおすすめしてください！

オリジナルURL: http://www.cnblogs.com/xcaocao/archive/2016/07/07/5649828.html