Web フロントエンド CSS の位​​置決めとフローティング float_html/css_WEB-ITnose

私は最近、金融会社、ecmal モールなど、いくつかのプロジェクトを行ってきました。顧客はフロントデスクに対して非常に高い要求を持っています。そこで、今日は CSS の基本、中核、および位置付けの問題について話しましょう。

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

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

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

CSS 位置決めメカニズム

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

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

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

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

以下では、相対位置決め、絶対位置決め、フローティングについて詳しく説明します。

CSS 位置プロパティ

position プロパティを使用すると、要素ボックスの生成方法に影響する 4 つの異なるタイプの配置から選択できます。

position 属性値の意味 :

static

要素ボックスは正常に生成されます。ブロックレベル要素はドキュメント フローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上のライン ボックスを作成します。

relative

要素ボックスは特定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。

absolute

要素ボックスはドキュメント フローから完全に削除され、そのボックスを含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。

修正済み

要素ボックスは位置を絶対に設定するように動作しますが、その要素ボックスを含むブロックはウィンドウ自体です。

ヒント: 要素の位置は通常のフロー内の位置に対して相対的なものであるため、相対配置は実際には通常のフロー配置モデルの一部と見なされます。

CSS 配置プロパティ

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

属性の説明

position は、要素を静的、相対、絶対、または固定位置に配置します。

top は、位置決めされた要素の上マージン境界とその要素を含むブロックの上境界の間のオフセットを定義します。

right は、配置された要素の右マージン端と、その要素を含むブロックの右端の間のオフセットを定義します。

bottom は、位置決めされた要素の下マージン境界とその要素を含むブロックの下境界の間のオフセットを定義します。

left は、位置決めされた要素の左マージン端と、その要素を含むブロックの左端の間のオフセットを定義します。

overflow は、要素のコンテンツがその領域をオーバーフローしたときに何が起こるかを設定します。

clip は要素の形状を設定します。要素が形状にクリップされて表示されます。

vertical-align は要素の垂直方向の配置を設定します。

z-index は要素の積み重ね順序を設定します。

CSS には、位置決めとフローティングのためのいくつかのプロパティが用意されており、これらのプロパティを使用して、列レイアウトを構築し、レイアウトの一部を別の部分に重ねて、長年にわたって通常は複数のテーブルを使用する必要があったタスクを完了できます。

配置の基本的な考え方はシンプルです。これにより、要素のボックスを通常の位置に対して、または親要素、別の要素、またはブラウザ ウィンドウ自体に対して相対的に表示する場所を定義できます。明らかに、この機能は非常に強力で驚くべきものです。ユーザー エージェントが CSS2 での位置決めを他の側面よりもはるかに適切にサポートしていることは驚くべきことではありません。

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

すべてはフレームです

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

表示プロパティを使用して、生成されるボックスの種類を変更できます。つまり、表示属性を block に設定すると、インライン要素 ( 要素など) をブロック レベルの要素のように動作させることができます。また、表示を none に設定して、生成された要素にフレームがまったく含まれないようにすることもできます。こうすることで、ボックスとそのすべての内容が表示されなくなり、文書内のスペースを占有しなくなります。

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