、エレメントの表示モードは何ですか
定義：要素の表示モードは、要素の表示方法です。
自分で行を占有し、例えば、行が複数置くことができます。
役割：Webページのタグは非常に多くの異なる場所でタグの異なる種類で使用され、その特性を理解するために、Webページのより良いレイアウトすることができます。
<h1>~<h6> <p> <div> <ul> <ol> <li>
2
、要素の表示モードの分類
ブロック要素
一般的なブロック要素：
タグは、最も典型的なブロック要素です。
ブロック要素の特徴
- ：より支配的な、独自の排他的な行。
- 高さ、幅、外側の余白と内側の余白を制御することができます。
- デフォルトの幅はコンテナの100%です。
- これはコンテナでありボックスであり、その中に行やブロックレベルの要素を置くことができます。
-
タ
グは主にテキストを格納するために使用されるため、ブロックレベル要素を
- テキスト要素の
- 中に入れることはできません。
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
-
‾などはテキストブロック-レベルタグで、その中に他のブロック-レベル要素を入れることはできません
インライン要素
一般的なインライン要素：
タグは最も典型的なインライン要素です。場所によってはインライン要素インライン要素とも呼ばれます。
インライン要素の特徴：
- 1行に隣り合うインライン要素、1行に複数表示可能。
- 高さと幅を直接設定することは無効です。
- デフォルトの幅はそれ自身の内容の幅です。
- インライン要素は、テキストまたは他のインライン要素のみを保持できます。
インラインブロック要素
- 与える
共通のインラインブロックタグ：
彼らは、ブロック要素とインライン要素の両方の特性を持っています。インライン・ブロック要素と呼ぶソースもあります。
インライン・ブロック要素の特徴：
- 1行の中で隣り合うインライン要素との間に隙間ができます。
- 一行に複数表示できます。
- ブロック要素に変換: display:block;
- 高さ、行の高さ、外側の余白、内側の余白は制御できます。
要素表示モードのまとめ
要素表示モードの変換
簡単な理解：あるモードの要素は、例えば 広げるために、別のモードの特性を必要とします
<img /> <input /> <td>
- インラインブロックに変換
display: inline-block; - インラインに変換：display:inline;
- インラインブロックに変換： ;
、コード内の垂直方向にセンタリングされたテキストの単一の行
解決策：テキストの行がボックスの高さよりも高いましょう、あなたはテキストが垂直に現在のボックス内にセンタリングさせることができます
理解するのは簡単です：
ボックスの- 高さよりも行の高さの
- 真ん中に絞られたテキストに上部ギャップと下部ギャップの行の高さは
- 、
- テキストは
- 、
ボックスの
- 高さほど高くはありませんが、
- テキストは
、現在のボックス内にセンタリングさ
- れます
- 。 行の高
- さがボックスの高さよりも小さい 場合
- 、テキストは上になり
- 、行の高さがボックスの高さよりも大きい場合、テキストは下になります 。
