CSSに属性値を表示する

CSS の表示属性は要素のレイアウトを制御し、次の属性値を持ちます: inline: 要素は他の要素に隣接する同じ行に表示されます。幅はコンテンツによって決まり、高さは内容によって決まります。フォントサイズ。 block: 要素は単独で 1 行を占め、幅のデフォルトは使用可能な幅全体になり、高さはコンテンツによって決まります。 inline-block: inline 属性と block 属性の両方を持ち、要素は同一行に表示されますが、幅と高さを設定できます。 flex: アイテムのサイズと配置が柔軟なコンテナ要素を作成します。グリッド: 要素が行と列に配置されたグリッド レイアウトを作成します。 content: 要素自体は非表示になりますが、その子要素は表示されます。 none: 要素を完全に非表示にします。

#CSS の display 属性値

display 属性は、ページ上の要素のレイアウトを制御します。次の属性値があります:

inline

要素が同じ行上の他の要素に隣接して表示されます。
• 要素の幅はコンテンツによって決まり、高さは通常、フォント サイズによって決まります。

block

要素が単独で 1 行を占めるようにします。
• 要素の幅のデフォルトは、使用可能な幅全体であり、高さはコンテンツによって決まります。

inline-block

inline 属性と block 属性の動作を組み合わせます。
• 要素は同じ行に表示されますが、幅と高さを設定できます。

#flex

#柔軟なアイテムのサイズと配置を備えたコンテナ要素を作成します。

• アイテムの方向、配置、スペース割り当てを指定できます。

grid

要素が行と列に配置されたグリッド レイアウトを作成します。

• 要素のサイズ、位置、間隔を正確に制御できます。

contents

要素自体は非表示にしますが、その子要素は表示します。

none

要素を完全に非表示にします。

• #正しい表示属性値の選択

正しい表示属性値の選択は、要素をどのように表示するかによって異なります。いくつかのガイドラインを次に示します。

テキスト、リンク、アイコンなどの要素にはインラインを使用します。

タイトル、段落、ボタンなどの要素にはブロックを使用します。
• ナビゲーション メニュー項目や画像などの要素には inline-block を使用します。
• 柔軟な配置が必要な複雑なレイアウトには、flex を使用します。
• 要素の配置を正確に制御する必要があるグリッド レイアウトには、グリッドを使用します。

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