一般的に使用される CSS 表示属性値とその適用シナリオ

CSS 表示属性の一般的な値とそのアプリケーション シナリオを習得するには、特定のコード例が必要です。

CSS (Cascading Style Sheets) はHTML ドキュメントのマークアップ言語を記述するために使用されるスタイル。表示属性は非常に重要な属性です。 display 属性は、要素の表示動作を定義し、ページ上の要素のレイアウト、ボックス モデルのタイプなどを決定するために使用できます。

CSS では、表示属性には複数の共通の値があり、各値はさまざまな要素の表示動作とアプリケーション シナリオに対応します。

1. display:none

display:none は、最も一般的な表示属性値の 1 つです。要素を非表示にするために使用され、要素はページを占有しなくなります。 . スペースをレイアウトします。要素が display:none に設定されている場合、その要素はページにまったく表示されません。

次は、display:none を使用して要素を非表示にするサンプル コードです。

<div style="display:none;">
  这是一个被隐藏的元素
</div>

2. display:block

display:block はデフォルト値です。表示属性値の。要素の表示属性が block に設定されている場合、要素はブロック レベルの要素としてレンダリングされ、独自の行を占有し、デフォルトの幅は親要素の幅の 100% になります。

次は、display:block を使用して要素をレイアウトするサンプル コードです。

<div style="display:block; width:200px; height:200px; background-color:red;">
  这是一个块级元素
</div>

3. display:inline

display:inline はレンダリングに使用されます。要素としての要素 他のインライン要素と一緒に表示でき、幅と高さは内容によってのみ決定できるインライン要素。

次に、display:inline レイアウト要素を使用するサンプル コードを示します。

<span style="display:inline; background-color:green;">
  这是一个行内元素
</span>

4. display:inline-block

display:inline-block can要素はインライン ブロック レベルの要素としてレンダリングされ、他のインライン要素と一緒に表示でき、幅、高さ、マージンなどの属性を設定できます。

以下は、display:inline-block レイアウト要素を使用するサンプル コードです。

<div style="display:inline-block; width:100px; height:100px; background-color:blue;"></div>
<div style="display:inline-block; width:100px; height:100px; background-color:yellow;"></div>

5. display:flex

display:flex は、次の目的で使用されます。フレキシブルボックスモデルを作成し、さまざまな属性を設定することでサブ要素のレイアウト、並べ替えなどを制御できます。

以下は、display:flex レイアウトを使用したサンプル コードです:

<div style="display:flex; justify-content:center; align-items:center; height:200px; background-color:purple;">
  <div style="width:100px; height:100px; background-color:pink;"></div>
</div>

上記は、CSS 表示プロパティのいくつかの一般的な値とそのアプリケーション シナリオのコード例です。これらの共通の値とアプリケーション シナリオをマスターすると、CSS をより適切に使用してページ レイアウトとデザインを実装できるようになります。

以上が一般的に使用される CSS 表示属性値とその適用シナリオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。