CSSレイアウトの表示属性を詳しく解説

この記事では、CSS レイアウトに対する表示属性の影響を理解できるように、CSS レイアウトの表示属性について詳しく説明します。困っている友人は参考にしていただければ幸いです。

表示は、レイアウトを制御するために使用される CSS の最も重要な属性であることを知っておく必要があります。各要素には、要素のタイプに関連するデフォルトの表示値があります。通常、ほとんどの要素のデフォルト値はブロックまたはインラインです。ブロック要素は通常、ブロックレベル要素と呼ばれます。インライン要素は通常、インライン要素と呼ばれます。 [CSS ビデオ学習の詳細については、こちらをご覧ください: css チュートリアル ]

さまざまな表示属性値が CSS コントロール レイアウトに及ぼす影響を見てみましょう。

css ブロック属性値

ブロック要素は、要素の前後に改行が入ったブロックレベルの要素として表示されます。

機能:

1. 各ブロックレベルの要素は新しい行で始まり、後続の要素も新しい行で始まります。 (本当に大げさですが、ブロックレベルの要素が 1 行を占めます)

2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。

3. 要素の幅が設定されていない場合、幅が設定されていない限り、その幅は親コンテナの 100% (親要素の幅と同じ) になります。

例: div 要素

<div>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</div>
<div>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</div>

レンダリング:

#css インライン属性値

インライン要素は、要素の前後に改行を入れずに、インライン要素として表示されます。インライン要素は、段落のレイアウトを損なうことなく、段落内でテキストを折り返すことができます。

機能:

1. すべての要素は他の要素と同じ行にあります。要素の高さ、幅、上下の余白は設定できません。 ;

3. 要素の幅は、要素に含まれるテキストまたは画像の幅であり、変更できません。

例:span は標準のインライン要素です。 a 要素は最も一般的に使用されるインライン要素であり、リンクとして使用できます。

<div>测试文字，<span style="background-color: palegreen;">被span元素包围，设置span的背景颜色</span>，<a href="#">a链接</a></div>

レンダリング:

##css none 属性値

もう 1 つの一般的なものCSS 要素に使用される表示値は none です。これは、スクリプトなどの一部の特殊な要素のデフォルトの表示値です。 display:none は、要素を削除せずに表示または非表示にするために JavaScript で一般的に使用されます。 (None を block と一緒に使用することもできます。要素を非表示にするには display:none を使用し、非表示の要素を表示するには display:block を使用します。例: セカンダリ ナビゲーション メニュー) これは可視性属性とは異なります。 display を none に設定した要素は表示されるべきスペースを占有しませんが、visibility: hidden に設定した場合でもスペースを占有します。

css のその他の表示属性値

inline-block や flex など、他にも興味深い表示値がたくさんあります。これら 2 つの属性値については、後続の記事で説明します。

表示値の変換

前述したように、すべての要素にはデフォルトの表示値があります。しかし、いつでもどこでも書き直すことができます。インライン要素を「人為的に作成」するのは混乱するように思えるかもしれませんが、特定のセマンティクスを持つ要素をインライン要素に変更することができます。一般的な例は、li 要素のデフォルトのブロック値をインライン値に変更して、水平メニューを作成することです。変換方法も非常に簡単で、次のステートメントを使用します。

display: inline;

概要: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。 CSS についてさらに詳しく知りたい場合は、ビデオ学習をお勧めします: css チュートリアル

!

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