ホームページ > ウェブフロントエンド > CSSチュートリアル > 表示にはどのような値がありますか?

表示にはどのような値がありますか?

百草
リリース: 2023-11-20 17:28:15
オリジナル
2758 人が閲覧しました
<p>表示の値には、block、inline、none、inline-block、flex、grid、table、inline-table、list-item が含まれます。詳細な紹介: 1. block: 要素をブロックレベルの要素にレンダリングします。ブロックレベルの要素はページ上のブロックを形成し、1 行だけを占有します。2. inline: 要素をインライン要素にレンダリングします。インライン要素は、それ自体では 1 行を占有せず、他の要素と並べることができます。3. none、この値は、要素がページ上にないことを指定します。

<p>表示にはどのような値がありますか?

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

CSS では、display 属性は要素の表示タイプを決定するために使用されます。さまざまな値を持つことができますが、主な display 属性値をいくつか示します:

<p>1. block: 要素をブロック レベルの要素としてレンダリングします。ブロックレベルの要素はページ上でブロックを形成し、独自の行を占めます。たとえば、<div><p><h1>-<h6>&lt ;li> などはすべてデフォルトのブロックレベル要素です。

<p>2, inline: 要素をインライン要素としてレンダリングします。インライン要素はそれ自体で行を占有せず、他の要素と並べて配置できます。たとえば、<span><a> などはすべてデフォルトのインライン要素です。

<p>3、none: この値は、要素がページに表示されないことを指定します。 visibility: hidden とは異なります。visibility: hidden を使用する要素は引き続きページ領域を占有しますが、display: none を使用する要素はレイアウトから完全に削除されます。取り除く。

<p>4. inline-block: 要素をインラインのブロックレベル要素としてレンダリングします。インライン ブロック レベル要素の特徴は、インライン要素と同様に横に並んで配置されますが、幅と高さを設定でき、ブロック レベル要素と同様に独自の寸法を持つことができます。

<p>5. flex: 要素をフレキシブル ボックス モデルとしてレンダリングします。フレックスボックス モデルは、1 次元空間 (行または列) 内で空間をレイアウト、整列、および分散するための CSS レイアウト手法です。

<p>6, Grid: 要素をグリッド コンテナーとしてレンダリングします。グリッド コンテナーは、2 次元 (行と列) 内でスペースをレイアウト、整列、および分散します。

<p>7, table: 要素をテーブルにレンダリングします。この値は主に表形式のデータを表示するために使用されていましたが、最新の CSS テクノロジがより柔軟なレイアウト方法を提供しているため、現在では一般的に使用されていません。

<p>8. inline-table: 要素をインライン テーブルとしてレンダリングします。インライン テーブルはインライン ブロック レベル要素に似ていますが、セル間のマージンやパディングなどのテーブルの特性を備えています。

<p>9. list-item: 要素をリスト項目としてレンダリングします。この値を使用すると、要素はデフォルトの箇条書きまたは番号付きでリスト内の項目として表示されます。

上記の主要な display 属性値に加えて、run-incompact、# などの他の値もあります。 # #marker などですが、現代の Web 開発では、これらの値を使用することは一般的ではありません。ほとんどの場合、上記の主な値を使用すると、ほとんどのレイアウトのニーズが満たされます。

以上が表示にはどのような値がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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