htmlタグの表示モード(ブロックタグ、インラインタグ、インラインブロックタグ)

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

たとえば、pタグを水平方向にセンタリングするのは有効だが、フォントに水平方向のセンタリング属性を付加するのは無効という状況が発生する（以下の通り）。

プレビューpを実行すると、テキストが水平方向にセンタリングされますが、フォントはセンタリングされません（以下の通り）。

そうすると、上記の質問は、htmlにおける表示モードに関するものです。

表示モードの特徴

大きく分けて2つのカテゴリーがあります。

ブロックレベル要素。 排他的な行で、属性値が width と height の場合に有効です。 幅が指定されていない場合 の場合、ブロック-レベル要素はブラウザの幅をデフォルトとします。 つまり、100%ワイド /strong;です。

行内要素。 複数のタグが1行に存在しても、widthとheightの属性値には影響がなく、幅と高さを保持するために完全にコンテンツに依存しています。

また、両方のモードを少し組み合わせた表示モードもあります。

行内ブロック要素。 は、インラインとブロックレベルのポイントの組み合わせで、widthとheightの属性値に対応するだけでなく、複数のタグを1行に存在させて表示することができます。

htmlの表示モードはブロックレベルとインラインに分けられ、一般的に使われているのは ブロックレベル div,p,h1~h6,ul,li,dl,dt,dd... があります。  一般的に使われている インライン span,font,b,u,i,strong,em,a,img,input があり、img と input はインラインのブロック要素である。

そこで、spanやfontの幅や高さを制御できないかと考えている人もいるのではないだろうか。そうだ。そこで、フロートとポジショニングは置いておいて、displayプロパティで相互に変換してみよう。

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

2. インラインラベルをブロックレベルのラベルに変換する：display:block;

3、inline-blockラベルに変換：display:inline-block。

このdisplayプロパティを対応するラベルに使用し、対応する値を取るだけで、表示モードを相互に変換することができます。

text-align属性が有効になる理由は、前述したように、ブロックレベルタグ 幅を指定しない場合 の場合、ブロック-レベル要素のデフォルトはブラウザの幅になります。 の幅の100％である。 すると、100%の幅で中央に配置されます。しかし、インライン要素の幅は完全にコンテンツに依存するので、幅はコンテンツの幅になります。背景のテストをして見ましょう。

つまり、ブロックレベルはボックスの中央に配置されているのですが、インライン要素の幅はコンテンツの幅なので、センタリングできるスペースがなく、text-align:center;は機能しません。しかし、フォントをブロックレベルに変換すると、違ってくるのです。

同様に、ブロックレベルがインラインに変換された場合、テキストは中央に配置されません。

htmlではインライン要素はテキスト専用のタグとして扱われ、ブロックレベルではテキストを水平方向にセンタリングできるため、ブロックレベルのインラインタグはテキスト専用として扱われ、ブロックレベルで text-align:center; を使うと中のインラインタグはブロックレベルのタグでテキストのように水平方向にセンタリングされることになるのです。

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

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

今回は主にhtmlの表示モードの特徴についてですが、もしこの記事があなたのお役に立てれば、忘れずにおすすめします

元記事のアドレスです。 http://www.cnblogs.com/xcaocao/archive/2016/07/07/5649828.html