cssのdisplay属性はブロックレベル要素とインライン要素の相互変換をどのように実現しているのでしょうか？

HTML には、ブロックレベル要素とインライン要素という 2 種類の要素があることがわかっています。 display 属性は、HTML のブロックレベル要素とインライン要素間の相互変換を実現します。さっそく本文に入りましょう。

デフォルトでは、段落

(ブロックレベル要素) のデフォルト表示値はブロックですが、インライン値としてレンダリングできます:

p{ display: inline;}

HTML を使用する のようなインライン要素はどうですか?

HTML 要素は、レンダリングではなく、その意味に基づいて選択するためです。段落がコンテンツに最適であると判断した場合、スタイル設定のみを目的としてタグを変更することはできません。 CSS はスタイルを実装します。

つまり、表示では、要素の意味を変更せずに要素のタイプを変更できます。

各表示オプションには特定のレンダリング動作があります。

ブロックは幅全体を占めます

inline はプレーン テキストとして扱われます

inline-block は次のようになります名前が示すように、ブロックとインラインの動作を組み合わせたもので、「両方の長所」オプション

list-item は利用可能な幅全体を占めるブロックに似ていますが、追加の箇条書き#が表示されます。

##table、table-row、table-cell はすべて、予期せぬとはいえ非常に具体的な動作を持ち、より興味深いレイアウトを実現します。

display:block

これにより、任意の要素がブロック要素に変換されます。

この手法は、クリック可能な領域を増やすためにリンクでよく使用され、背景色を設定することで簡単に評価できます。

.menu a{ background: red; color: white;}

<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>
  </li></ul>

効果は次のとおりです:

これらのリンクをブロックに変換すると、ターゲット領域が増加します:

.menu a{ background: red; color: white; display: block;}

効果は次のとおりです。 :

display :inline

これにより、あらゆる要素が単なるプレーン要素であるかのようにインライン要素に変換されます。文章 。

これは、リスト項目が意味的には重要だが視覚的には役に立たない水平ナビゲーションを作成するためによく使用されます。

<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>

効果は次のとおりです:

.menu li{ display: inline;}

効果は次のとおりです:

display: list-item

表示される唯一の HTML 要素 list-item は、(当然のことですが) リスト項目

と定義の説明

箇条書き (順序なしリスト

の場合) または増分番号 (順序付きリスト

の場合) を使用してリスト項目をレンダリングします。
これらの箇条書きと数字のレンダリングはブラウザーによって異なり、CSS でスタイルを設定するのが難しいため、display: list-item はこのルールを使用しません。実際、
1. はより柔軟であるため、通常、display: block または display: inline としてレンダリングされます。

   display: none

   display: none; HTML 要素を適用すると、その要素はコード内に存在しなかったかのように Web ページから削除されます。

   <p>php中文网</p>
   <p class="class">PHP中文网</p>
   <p>Php中文网</p>

   .class{ display: none;}

   結果は次のとおりです:

   
   

   

   コードには 3 つの段落がありますが、2 つの段落のみが表示され、2 番目の段落がまったく表示されないかのようになります。存在しました。

   visibility: hidden

   CSS プロパティの可視性と表示。少し似ています。アプリは、visibility: hidden; を使用してページ上の要素を非表示にしますが、非表示になるだけであり、必要なスペースが占有されます。

   <p>哈哈哈哈</p>
   <p class="class">哈哈哈哈哈哈</p>
   <p class="class">哈哈哈哈哈哈哈哈</p>
   <p>哈哈哈哈哈哈哈哈啦</p>

   .class{ visibility: hidden;}

   結果は次のとおりです:

   

   コードには 5 つの段落があり、2 つだけが表示されますが、非表示の段落が占有するスペースはまだ残っています。存在しますが、それらよりも少ないものしか見えません。

以上がcssのdisplay属性はブロックレベル要素とインライン要素の相互変換をどのように実現しているのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。