display 属性は、CSS の最も重要な属性の 1 つであり、主に要素のレイアウトを制御するために使用され、要素を表示するかどうか、およびどのように表示するかを設定できます。
1. 表示属性の役割
1. 表示属性は、要素の内部および外部の表示タイプを設定できます。
(1) 外部ディスプレイの種類:
a. 要素の外部表示タイプには、ブロック、インラインなどが含まれます。
b. 外部ディスプレイのタイプによって、流体レイアウト内の要素のパフォーマンスが決まります。
(2) 内部ディスプレイの種類:
内部表示タイプには、フレックス レイアウト、グリッド レイアウト、流体レイアウトなどが含まれます。
要素の内部表示タイプは、その子のレイアウト方法を制御します。
2. 流動的なレイアウト (ドキュメント フローまたは通常のフロー):
「ドキュメント フロー」または「流体レイアウト」は、レイアウトに変更が加えられる前に (デフォルトで) 「ブロック」要素と「インライン」要素がページに表示される方法です。
簡単かつ率直に言うと、ブロックレベル要素とインライン要素をどのように入力してページに表示するかを規定する植字方法です。
(1) フロー レイアウト - ブロック レベルの要素レイアウト メソッドの場合:
ブロックレベルのボックスは、それを含むブロックの上部から順番に垂直方向に配置されます。
同じレベルのボックス間の垂直距離は、「margin」属性によって決まります。
2 つの隣接するブロック レベル ボックス間の垂直方向の間隔は、マージン折りたたみの原則に従って縮小されます。
(2) 流体レイアウト - インライン要素レイアウト方法の場合:
ボックスは、含まれているブロックの上から順に水平に配置されます。
水平方向のマージン、境界線、パディングのみが保持されます。
ボックスは、下または上、またはテキストの下揃えなど、さまざまな方法で垂直方向に整列できます。
2. エレメント外部表示タイプ
1. splay は、次の属性値を通じて要素の表示タイプを指定します。
(1) ブロックブロックレベル
(2) インラインブロック インラインブロック
(3) インライン
2. 要素の表示形式はブロックレベル、インラインなどに分かれます。
3. インライン（インライン）要素は、インラインインライン要素とインラインブロックインラインブロック要素に分けられます。
(1) diblock ブロックレベル要素
1. 一般的なブロックレベルの要素は次のとおりです。
<p>、<div>、<ul>、<ol>、<li>、<h1>～<h6>、<dl> など。
2. ブロックレベル要素の特徴:
(1)専用線
(2) 幅と高さの属性を設定できます。
(3) 幅が設定されていない場合、幅はデフォルトで親要素のコンテンツ領域の幅になります。
(4) ブロックレベル要素には任意のタイプの要素を配置できますが、他のブロック要素をテキスト要素タグに配置することはできません。
(5) pタグ内にpタグ、divタグは配置できません。
(6) h1～h6タグ内にpタグ、divタグは配置できません。
(2) inline-block インラインブロック要素
1. 次の要素には、インライン ブロック要素の特性があります。
<img>、form 要素、<video>、<audio> など。これらの要素は基本的に置換可能要素と呼ばれます (インライン要素として分類されます)。
2. インラインブロック要素の特徴:
(1) 隣接するインラインブロック（またはインライン）要素が 1 行に配置できない場合は、別の行に折り返されて表示されます。
(2) 隣接するインラインブロック要素の間には空白のギャップが生じます。
(3) width 属性と height 属性を設定できます。要素のデフォルトの幅は、要素自体のコンテンツの幅となります。
(3) inline インライン（インライン）要素
1. 一般的なインライン要素には次のものがあります。
<a>、<strong>、<span>、<i>、<del> など。
2. インライン要素の特徴:
隣接するインライン要素が 1 行に収まらない場合は、新しい行に表示されます。
幅と高さのプロパティの設定は無効です。コンテンツのサイズに応じて幅と高さが拡張されます。
インライン要素内に配置できるのは、テキストまたはその他のインライン要素のみです。
3. 注:
<a> タグを <a> タグ内に配置することはできませんが、ブロックレベル要素は <a> タグ内に配置できます。
実際の開発では、<a>タグがブロックレベルの要素に変換される場合があります。
3 つの要素タイプの比較
3. インライン要素とブロックレベル要素間の変換
対応する表示属性値を対応する要素に追加して、要素を対応する要素タイプに変換するだけです。
(1) 要素をブロックレベルの要素に変換するには、display: block を使用します。
例：
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;background-color:#ACC;line-height:50px;text-align:center;text-decoration:なし;}</style></head><body><ahref=>dotcpp プログラミング リンク</a></body></html>実行結果:
(2) 要素を inline 要素に変換するには、display: inline; を使用します。ただし、要素をインライン要素に変換するアプリケーションはほとんどありません。
(3) display: inline-block を使用して要素をインライン ブロック要素に変換します。
4. 隠し要素メソッド
補充:
(1) none以外の表示値は表示要素となります。
(2) 可視性:visible は表示要素です。
例：
属性値 none は要素を非表示にするために使用できます。 display: none; 通常、要素を表示または非表示にするために JavaScript と組み合わせて使用されます。
<!DOCTYPEhtml><html><head><style>div{width:350px;height:100px;background-color:#AAA;}</style></head><body><divid=box></div ><buttononclick=change_box(this)>隠す</button><script>functionchange_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style .display=;obj.innerHTML=hide;}else{box.style.display=none;obj.innerHTML=show;}}</script></body></html>実行結果:
5. 2 つの非表示方法の違い
6. インラインブロック要素のデフォルトの空白を削除する
デフォルトでは、インライン ブロック要素間にギャップが作成されます。
ギャップの理由:
(1) 要素がインライン要素としてフォーマットされている場合、要素間の空白文字 (スペース、復帰、改行など) はブラウザによって処理されます。
(2) ホワイトスペースの処理方法（デフォルトは余分なスペースをマージする通常）により、元のHTMLコードのキャリッジリターンとラインフィードがホワイトスペース文字に変換されるため、要素間に隙間が生じます。
(3) これらの要素間の間隔はフォントのサイズに応じて変化します。
解決：
(1) 親要素を追加し、同時に子要素のフォントサイズを書き換える
font-size 属性には継承があるため、親要素 font-size:0; は子要素 span に継承され、子要素は font-size サイズをリセットする必要があります。
(2) 要素にfloatを追加する
要素にフロートを追加した後、親要素の高さを追加しないとドキュメント フローから切り離されてしまい、高さが崩れる問題が発生するため、フロートによって引き起こされる問題を解決する必要があります。
(3) 画像と画像の隙間に、display:block; を追加します。
display:block を追加すると、画像はブロックレベルの要素になり、排他的な行を占有します。