CSS の配置を理解するにはどうすればよいですか?

CSS Positioning プロパティを使用すると、要素を配置できます。

#CSS の位​​置決めとフローティング

CSS には、位置決めとフローティングのためのいくつかのプロパティが用意されており、これらのプロパティを使用して、列レイアウトを作成し、レイアウトの一部を組み合わせることができます。他の部分は重複しており、長年にわたって複数のフォームの使用が必要となることが多かったタスクも実行できます。 (推奨学習:

CSS 入門チュートリアル )

配置の基本的な考え方は単純で、要素ボックスを通常の位置を基準にしてどこに表示するかを定義できます。要素、別の要素、またはブラウザ ウィンドウ自体の位置。

明らかに、この機能は非常に強力で驚くべきものです。ユーザー エージェントが CSS2 での位置決めを他の側面よりもはるかに適切にサポートしていることは驚くべきことではありません。

一方、Float は CSS1 で最初に提案され、Web の初期に Netscape によって追加された機能に基づいていました。フローティングは正確な位置決めではありませんが、通常のフロー レイアウトでもないことは確かです。 float の意味については後の章で説明します。

すべてはボックスです

div、h1、または p 要素は、ブロックレベル要素と呼ばれることがよくあります。これは、これらの要素がコンテンツのブロック、つまり「ブロック ボックス」として表示されることを意味します。対照的に、span や Strong などの要素は、そのコンテンツが 1 行、つまり「インライン ボックス」内に表示されるため、「インライン要素」と呼ばれます。

表示プロパティを使用して、生成されるボックスのタイプを変更できます。これは、表示プロパティを block に設定することで、インライン要素 ( 要素など) をブロック レベルの要素のように動作させることができることを意味します。

表示を none に設定して、生成された要素にフレームがまったく存在しないようにすることもできます。こうすることで、ボックスとそのすべての内容が表示されなくなり、文書内のスペースを占有しなくなります。

しかし、場合によっては、明示的な定義がなくてもブロックレベルの要素が作成されます。これは、ブロックレベルの要素 (div など) の先頭にテキストを追加すると発生します。テキストが段落として定義されていない場合でも、段落として扱われます。

<div>
some text
<p>Some more text.</p>
</div>

ログイン後にコピー

この場合、ボックスは特別に定義された要素に関連付けられていないため、名前のないブロック ボックスと呼ばれます。

同様の状況がブロックレベル要素のテキスト行でも発生します。 3 行のテキストを含む段落があるとします。テキストの各行は名前のないボックスを形成します。スタイルを適用する場所がないため、名前のないブロックまたはライン ボックスにスタイルを直接適用することはできません (ライン ボックスとインライン ボックスは 2 つの異なる概念であることに注意してください)。ただし、画面に表示されるものはすべて、ある種のボックスを形成していることを理解するのに役立ちます。

CSS 位置決めメカニズム

CSS には、通常のフロー、フローティング、絶対位置という 3 つの基本的な位置決めメカニズムがあります。

特に指定しない限り、すべてのボックスは通常のフローに配置されます。つまり、通常のフロー内の要素の位置は、(X)HTML 内の要素の位置によって決まります。

ブロックレベルのボックスは上から下に順番に配置され、ボックス間の垂直距離はボックスの垂直マージンから計算されます。

インライン ボックスは水平方向に一列に配置されます。それらの間隔は、水平方向のパディング、境界線、およびマージンを使用して調整できます。ただし、垂直方向のパディング、境界線、およびマージンはインライン ボックスの高さには影響しません。ラインによって形成される水平のボックスはライン ボックスと呼ばれます。ライン ボックスの高さは常に、そこに含まれるすべてのインライン ボックスを収容できる十分な高さになります。ただし、行の高さを設定すると、このボックスの高さが大きくなる可能性があります。

以上がCSS の配置を理解するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。