cssのdisplay属性はブロックレベル要素とインライン要素の相互変換をどのように実現しているのでしょうか？-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

不言

Nov 05, 2018 pm 06:01 PM

表示属性

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>

ログイン後にコピー

効果は次のとおりです:

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

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

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

ログイン後にコピー

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

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

display :inline

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

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

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

ログイン後にコピー

効果は次のとおりです:

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

.menu li{ display: inline;}

ログイン後にコピー

効果は次のとおりです:

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

display: list-item

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

と定義の説明

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

はより柔軟であるため、通常、display: block または display: inline としてレンダリングされます。
display: none
display: none; HTML 要素を適用すると、その要素はコード内に存在しなかったかのように Web ページから削除されます。
```
php中文网
PHP中文网
Php中文网
```
ログイン後にコピー
```
.class{ display: none;}
```
ログイン後にコピー
結果は次のとおりです:

コードには 3 つの段落がありますが、2 つの段落のみが表示され、2 番目の段落がまったく表示されないかのようになります。存在しました。
visibility: hidden
CSS プロパティの可視性と表示。少し似ています。アプリは、visibility: hidden; を使用してページ上の要素を非表示にしますが、非表示になるだけであり、必要なスペースが占有されます。
```
哈哈哈哈
哈哈哈哈哈哈
哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈啦
```
ログイン後にコピー
```
.class{ visibility: hidden;}
```
ログイン後にコピー
結果は次のとおりです:

コードには 5 つの段落があり、2 つだけが表示されますが、非表示の段落が占有するスペースはまだ残っています。存在しますが、それらよりも少ないものしか見えません。
以上がcssのdisplay属性はブロックレベル要素とインライン要素の相互変換をどのように実現しているのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。