CSS の表示属性の一般的な属性値について詳しく見る

CSS の表示属性の一般的な属性値を深く理解するには、特定のコード例が必要です

はじめに:

CSS の display 属性は、要素の表示方法を制御する重要な属性の 1 つです。ボックスを生成するかどうか、専用の行を占有するかどうか、表示するかどうかなど、要素がドキュメント内でどのように表示されるかを決定します。この記事では、表示属性の一般的な属性値を詳しく紹介し、読者がこれらの属性値の使用法をよりよく理解して習得できるように、具体的なコード例を添付します。

1. block

block は表示属性のデフォルト値であり、これにより要素はブロックレベルのボックスを生成し、独自の行を占有します。一般的なブロック要素には、div、p、h1 ～ h6 などが含まれます。

サンプル コード:

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

2. inline

inline 要素はインライン ボックスを生成し、単一行を占有しません。一般的なインライン要素には、span、a、img などが含まれます。

サンプル コード:

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

3. inline-block

inline-block は、要素にインライン ブロック レベルのボックスを生成させます。専用線ですが、幅と高さを設定します。一般的なインライン ブロック要素には、入力、ボタンなどが含まれます。

サンプル コード:

<input type="text" style="display: inline-block; width: 200px; height: 30px;">

4. none

none を指定すると、要素はボックスを生成しません。つまり、要素が完全に非表示になります。非表示の要素はスペースを占有せず、他の要素のレイアウトに影響を与えません。

サンプル コード:

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

5. flex

flex は要素をフレキシブル ボックス コンテナとして設定し、ボックス内のアイテムのレイアウトを可能にします。ボックスのプロパティを通じて調整されます。 flex 属性の一般的な値には、行、列、行反転、列反転などが含まれます。

サンプルコード:

<div style="display: flex; flex-direction: row; justify-content: space-between;">
    <div style="width: 100px; height: 100px; background-color: red;"></div>
    <div style="width: 100px; height: 100px; background-color: blue;"></div>
    <div style="width: 100px; height: 100px; background-color: green;"></div>
</div>

結論:

display 属性は、要素の表示モードを制御できる CSS の非常に便利な属性です。共通の属性値は、 block と inline 、 inline-block 、 none と flex などです。これらの属性値を深く理解し、特定のコード例と組み合わせることで、読者はこれらの属性値をよりよく理解して適用し、より優れたページ レイアウト効果を実現できるようになります。この記事が読者のお役に立てば幸いです。

以上がCSS の表示属性の一般的な属性値について詳しく見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。