ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSでの表示の属性値は何ですか?

CSSでの表示の属性値は何ですか?

百草
リリース: 2023-11-14 14:09:11
オリジナル
3123 人が閲覧しました

CSS の表示属性値には、inline、block、inline-block、none、flex、grid、table、inline-table、list-item、または継承などが含まれます。詳細な紹介: 1. inline, 要素はインライン要素として表示され、隣接する要素と同じ行に表示されます。width 属性と height 属性は効果がなく、margin 属性とpadding 属性は left と right の値のみを設定できます。 2. ブロック、要素は Show などです。

CSSでの表示の属性値は何ですか?

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

CSS の表示属性は、要素の表示モードを定義するために使用され、要素がページ上でどのように表示されるかを決定します。 display 属性には次の共通の属性値があります:

1. inline: 要素はインライン要素として表示され、隣接する要素と同じ行に表示されます。 width 属性と height 属性は効果がなく、margin 属性と padding 属性は left と right の値のみを設定できます。一般的なインライン要素には、span、a、img などが含まれます。

2. block: 要素はブロックレベルの要素として表示され、排他的な行を占有します。幅と高さの属性を設定でき、マージンとパディングの属性は 4 方向に設定できます。一般的なブロックレベル要素には、div、p、h1 などが含まれます。

3. inline-block: 要素はインラインのブロックレベル要素として表示され、隣接する要素と同じ行に表示されます。幅と高さの属性を設定でき、マージンとパディングの属性は 4 方向に設定できます。一般的なインライン ブロック レベルの要素には、ボタン、入力などが含まれます。

4. none: 要素は表示されません、つまり要素は非表示になります。要素はページ上のスペースを占有せず、インタラクション イベントに応答しません。

5. Flex: 柔軟なレイアウトを使用して要素を表示し、柔軟なレイアウトを可能にします。これにより、利用可能なスペースに基づいて要素を自動的にサイズ変更および配置できるようになります。通常、flex-direction、flex-wrap、その他のプロパティと一緒に使用されます。

6. グリッド: グリッド レイアウトを使用して要素を表示し、要素を 2 次元グリッドに配置します。グリッド レイアウトでは、より正確なレイアウト制御が可能で、行と列のサイズ、間隔などを定義できます。通常、grid-template-columns、grid-template-rows、およびその他の属性と一緒に使用されます。

7. table: 要素は、HTML の table 要素と同様に、テーブルとして表示されます。要素はテーブル オブジェクトに解析され、テーブル ヘッダー (thead)、テーブル本体 (tbody)、テーブル フッター (tfoot) などのサブ要素を含めることができます。

8. inline-table: 要素はインライン テーブルとして表示され、隣接する要素と同じ行に表示されます。 table 属性と似ていますが、インライン要素として表示されます。

9. list-item: 要素は、HTML の li 要素と同様に、リスト項目として表示されます。順序なしリスト (ul) および順序付きリスト (ol) のサブ項目に適用されます。

10.inherit: 親要素の表示属性値を継承します。親要素がない場合、それはブロックとみなされます。

これらは、CSS の表示属性の一般的な属性値の一部です。さまざまな表示属性値を設定することで、ページ上での要素の表示方法を柔軟に制御し、さまざまなレイアウト効果を実現できます。

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート