CSSのdisplay属性は何をするのでしょうか？

CSS の display 属性は、要素が生成するボックスのタイプを指定するために使用されます。表示属性はフロントエンド開発でよく使用される属性で、一般的に使用される属性値には、block、none、inline、および inline-block が含まれます。

#Web ページ上のすべての要素は長方形のボックスです。 display 属性は、要素が生成するボックスのタイプを指定します。 display 属性は、フロントエンド開発でよく使用される属性です。

(学習ビデオの推奨: css ビデオ チュートリアル)

一般的な属性値の概要:

block ブロック オブジェクトのデフォルト値。オブジェクトの後に値

none を指定して新しい行を追加し、オブジェクトを非表示にします。可視性属性の非表示値とは異なり、非表示オブジェクトの物理スペースは保持されません。

inline インライン オブジェクトのデフォルト値。この値を使用して、行

inline-block インライン ブロック要素をオブジェクトから削除します。この属性値は、インラインとブロックの特性を組み合わせたものです。つまり、両方ともインライン要素であり、幅と高さを設定できます。

1.display:block

1.block: 要素はブロックレベルの要素として表示され、要素の前後に改行が入ります。通常はインライン要素の変換に使用されます。ブロックレベルの要素に変換します。では、ブロックレベルの要素とは何でしょうか?インライン要素とは何ですか?

2. ブロックレベルの要素:

は常にブロックの形式で表示され、行全体を占めます。いくつかの兄弟ブロック要素が上から下に配置されます (float 属性を使用する場合を除く)。

高さ、幅、各方向の外側パッチ (マージン)、各方向の内側パッチ (パディング) を設定できます。

要素の幅 (width) が設定されていない場合、固定幅を設定しない限り、その幅はコンテナーの 100% になります。

ブロックレベル要素は、他のブロックレベル要素またはインライン要素内にネストできます。

ブロックレベル要素の表示属性値は、デフォルトで block になります。

3. インライン要素

単独では行全体を占有するのではなく、要素自体の幅と高さが存在するスペースのみを占有します。内容が開きます。いくつかの兄弟インライン要素は、左から右に (つまり、インライン要素は他のインライン要素と同じ行に配置できます)、上から下に配置されます。

インライン要素の高さと幅は設定できません。通常、高さはフォントのサイズによって決まり、幅はコンテンツの長さによって制御されます。

インライン要素では、左右のマージン値と左右のパディング値のみ設定できますが、上下のマージン値と上下のパディング値は設定できません。したがって、左右のパディング値を設定することでインライン要素の幅を変更できます。

インライン要素には通常、ブロックレベルの要素を含めることはできません。

ブロックレベル要素の表示属性値は、デフォルトでインラインになります。

2.display:none

display:none の値は、要素が表示されないことを示します。要素を非表示にする場合は、要素にこの属性を設定すると、要素が Web ページから消えます。ただし、要素はドキュメントから削除されません。要素は Web ページ構造内で非表示になるだけで、Web ページには表示されません。ウェブページ。ただし、要素を表示したい場合は、要素に display:block を設定すると、要素を Web ページに表示できます。

3. display:inline

display:inline 関数はブロックレベル要素をインライン要素に変換できますが、このブロックレベル要素は幅を設定できなくなります。 、高さ、上下のマージン、パディング。このブロックレベル要素の実際の幅と高さは自動であり、設定した値ではありません。

4.display:inline-block

名前から判断すると、inline と block を組み合わせ、その特徴を保持していることがわかります。したがって、inline-block属性が設定された要素は、block要素でwidth属性とheight属性を設定できるという特徴だけでなく、inline要素が折り返さないという特徴も保持しています。

関連する推奨事項: CSS チュートリアル

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