div css 表示 非表示

div css の表示と非表示

CSS では、display 属性を通じて要素の可視性を制御できます。次のメソッドが一般的に使用されます:

1. display: none;
   使用display: none; 要素を非表示にします。要素を display: none; に設定すると、要素はページ上に表示されず、スペースも占有しません。

たとえば、次のコード スニペットでは、div 要素が display: none; に設定されているため、ページには表示されません:

<div class="hidden">这是要隐藏的内容</div>

<style>
.hidden{
  display: none;
}
</style>

2. display : block;
   display: block; 要素をブロックレベルの要素として表示することを意味します。デフォルトでは、div 要素はブロックレベルの要素であり、ページ上の独自の行に表示されます。

たとえば、次のコード スニペットでは、div 要素が block; を表示するように設定されており、これはブロック レベルの要素として表示されます:

<div class="block">这是块级元素</div>

<style>
.block{
  display: block;
}
</style>

3. display: inline;
   display: inline; は要素をインライン要素として表示することを意味します。デフォルトでは、span 要素はインライン要素であり、ページ上の他のインライン要素またはテキストと同じ行に表示されます。

たとえば、次のコード スニペットでは、div 要素が inline; を表示するように設定されており、これは inline 要素として表示されます:

<div class="inline">这是行内元素</div>

<style>
.inline{
  display: inline;
}
</style>

4. display: inline-block;
   display: inline-block; は、要素をインライン ブロック レベルの要素として表示することを意味します。インラインのブロックレベル要素は、インライン要素などの他の要素と同じ行に表示でき、幅、高さ、内側と外側のマージン、およびブロックレベル要素と同様のその他の属性を設定することもできます。

たとえば、次のコード スニペットでは、div 要素が inline-block; と表示されるように設定されており、これはインライン ブロック レベルの要素として表示されます:

<div class="inline-block">这是行内块级元素</div>

<style>
.inline-block{
  display: inline-block;
}
</style>

display属性を利用することで要素の表示・非表示を簡単に実装できます。要素が display: none; に設定されている場合、その要素の下にあるすべての子要素も非表示になることに注意してください。したがって、実際のアプリケーションでは、特定のニーズに応じて適切な表示属性を選択する必要があります。

以上がdiv css 表示 非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。