CSS のフローティングと配置の定義と使用法の概要

---

1. フローティング

1. フローティング要素

1. フローティング要素について覚えておくべきことがいくつかあります。
まず、フローティング要素は何らかの方法でドキュメントの通常のフローから削除されます。レイアウトに影響を与える
2. CSS の独自の方法を採用し、フローティング要素はほぼ「独自のグループ」に属しますが、要素がフローティングされると他の要素に影響を与えます。要素は要素を「囲みます」。フローティング要素の周囲のマージンはマージされません。
4. フローティングなし: float:none は要素がフローティングになるのを防ぐために使用されます。

2. フローティングの詳細な裏話

フローティングの内容を詳しく理解する前に、まず包含ブロックとは何かを知る必要があります。

浮動要素を含むブロックは、最も近いブロックレベルの祖先要素です。
css は、浮動要素の配置を制御するための一連のルールを提供します。

• 浮動要素の左 (または右) 外側境界は、その要素を含むブロックの左 (または右) 内側境界を超えることはできません

• 。浮動要素 の左 (または右) 外側境界は、後から出現する浮動要素の上部が前に発生した浮動要素の下部の下。

• 左フロート要素の右外側境界線は、その右側にある右フロート要素の外側境界線の右側にはなりません。

• フローティング要素の上部は、その親要素の内側の上部より高くすることはできません。

• フローティング要素の上部は、以前のすべてのフローティング要素またはブロックレベル要素の上部より高くすることはできません。

• フローティング要素がソースドキュメント内の別の要素よりも前にある場合、フローティング要素の上部は、その要素によって生成されたボックスを含む行ボックスの上部よりも高くすることはできません

• 左側 (または右側)浮動要素の右 (右) 別の浮動要素があります。前者の右外側の境界線は、その要素を含むブロックの右 (左) 境界の右 (左) に置くことはできません

• 浮動要素は、次の高さに配置する必要があります可能です

• 左フロート要素はできるだけ左に移動し、右フロート要素はできるだけ右に移動する必要があります。

3. 実際の動作

まず、フローティング要素が親要素よりも高い場合に何が起こるかを見てみましょう。

CSS2.1 は、float 要素の動作の 1 つの側面を明確にしています。float 要素は、その子孫の float 要素をすべて含むように拡張されます。
そのため、親要素をフローティング要素として設定することで、その親要素内にフローティング要素を含めることができます。

4. 負のマージン

負のマージンにより、フローティング要素が親要素の外側に移動する可能性があります。負のマージンを設定すると、浮動要素が親よりも広く表示されるのと同じように、要素は親よりも広く表示されます。

このルールは前のルールと矛盾しているように見えます (浮動要素は親要素の外側に配置されます)。しかし、前のセクションのルールを注意深く検討すると、これが実際には技術的に許可されていることがわかります。フローティング要素のコンテンツは親要素内にある必要がありますが、マージンが負であるため、フローティング要素のコンテンツは、それ自体の外側の境界をカバーするかのように配置されます。

5. フローティング要素、コンテンツ、オーバーラップ

もう 1 つの興味深い質問は、フローティング要素が通常のフローでコンテンツとオーバーラップするとどうなるかということです。

css2.1 では、次のルールが指定されています:

インライン ボックスがフローティング要素に重なる場合、その枠線、背景、コンテンツはすべてフローティング要素の「上」に表示されます。
ブロックボックスがフローティング要素に重なる場合、その境界線と背景はフローティング要素の「下」に表示され、コンテンツはフローティング要素の「上」に表示されます。
6. クリア

場合によっては、コンテンツがフローティング要素を介して流れることを意図的に回避したい場合があります。例:

すべての h3 要素が左側の浮動要素の右側に配置されないようにするには、h3{clear:left;} を設定します。これは、「h3 の左側に浮動画像がないことを確認する」と理解できます

2. 位置決め

1. 基本概念

位置決めを使用すると、要素ボックスを相対的にどこに表示するかを正確に定義できます。通常の位置、または親要素、別の要素に対する相対位置は、ブラウザ ウィンドウ自体の位置を設定します。

2. 配置タイプ

static (初期値):
• 要素ボックスは通常どおり生成され、ブロックレベル要素はドキュメントフローの一部として長方形のボックスを生成し、インライン要素は 1 つ以上の行を作成します。親要素内のボックス。

  
  

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

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

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

3. 包含ブロック

浮動要素の場合、包含ブロックは最も近いブロックレベルの祖先要素として定義されます。
位置決めの場合、状況はさらに複雑になります:
- 「ルート要素」の包含ブロック (初期包含ブロックとも呼ばれます) は、ユーザー エージェントによって確立されます。HTML では、ルート要素は html 要素ですが、一部のブラウザでは、ルート要素として body が使用されます。
- 位置値が相対的または静的である非ルート要素の場合、それを含むブロックは、最も近いブロック レベルのボックス、テーブル セル、またはインライン ブロックの祖先ボックスの内容によって境界されます。
- 非ルート要素の場合、その位置値が絶対値である場合、それを含むブロックは、位置値が静的ではない最も近い祖先要素に設定されます。特性4. offset 属性 3 つの位置決めメカニズムを導入しました。位置決め要素を記述するために 4 つの属性が使用されます。これら 4 つのプロパティをオフセット プロパティと呼びます。これらは位置決めを完了するための重要な部分です。

- 上部と下部については、含まれるブロックの高さを基準にします

- 右と左について、これらのプロパティは、包含ブロックの幅を基準にして、包含ブロックの最も近い端からのオフセットを表すため、オフセットとも呼ばれます。

5. 幅と高さ

幅と高さを設定する

配置された要素に特定の幅を指定したい場合は、同様に、height を使用して特定の高さを宣言することもできます。配置された要素。

幅と高さを制限する

min-width と min-height を使用して、要素のコンテンツ領域の最小サイズを定義できます。

同様に、属性 max-width と max-height を使用して要素のサイズを制限することもできます。

6. コンテンツのオーバーフローとクリッピング

オーバーフロー

何らかの理由で、要素が特定のサイズに固定されているが、この時点で、オーバーフロー属性を使用してこれを制御できるとします。状況

- 表示:

デフォルト値。要素のコンテンツが要素ボックスの外側にも表示されることを示します。通常、これによりコンテンツが独自の要素ボックスを超えて拡張されますが、ボックスの形状は変更されません。

- 非表示:

要素のコンテンツは要素ボックスの境界で切り取られ、ユーザーがクリッピング領域を超えてコンテンツにアクセスできるようにするスクロール インターフェイスは提供されません。 - スクロール:

要素のコンテンツは要素のボックスの境界で切り取られますが、ユーザーが使用できるスクロール メカニズムが提供されています。

7. コンテンツのクリッピング

絶対的に配置された要素のコンテンツがコンテンツ ボックスからオーバーフローし、コンテンツのクリップを要求するようにオーバーフローが設定されている場合は、clip 属性を使用してクリッピング領域の形状を変更できます。
clip:rect(top,right,bottom,left);

8. 要素の可視性

クリッピングとオーバーフローに加えて、要素全体の可視性を制御することもできます。

可視性:
- 見える

- 非表示 不可視。

- 崩壊

-継承

visibility:collapse
テーブル要素内で使用すると、この値は行または列を削除しますが、テーブルのレイアウトには影響しません。行または列が占めるスペースは、他のコンテンツに使用できます。この値が別の要素で使用される場合、その値は「非表示」として表示されます。

visibility:hidden
可視性を設定して要素が「非表示」状態になっている場合でも、要素は依然として表示されているかのようにドキュメントのレイアウトに影響を与えます。言い換えれば、要素はまだ存在しており、目に見えないだけです。これは、表示されないだけでなく、display:none とは異なります。ドキュメントからも削除されるため、ドキュメントのレイアウトには影響しません。
9. 絶対配置
ブロックと絶対配置要素を含む 要素が絶対配置されると、その要素はドキュメント フローから完全に削除されます。次に、それを含むブロックに対して相対的に配置されます。これは、絶対的に配置された要素が他の要素を覆ったり、他の要素によって覆われたりする可能性があることを意味します。

絶対配置要素の包含ブロックは、位置値が静的ではない最も近い祖先要素です。作成者は通常、絶対配置要素の包含ブロックとして要素を選択し、その位置を相対位置として指定し、オフセットを持ちません。

自動エッジオフセット

要素の静的位置という用語の一般的な意味は、通常のフローにおける要素の元の位置です。より具体的には、「上」の静的位置は、包含ブロックの上端から仮想ボックスの上端までの距離です。

10. 非置換要素の配置とサイズ

一般に、要素のサイズと位置は、その要素を含むブロックによって異なります。各属性の値もある程度の影響を与えますが、最も重要なのはその属性を含むブロックです。

11. 置換される要素の配置とサイズ

置換されない要素と置換される要素の配置ルールは大きく異なります。これは、置換された要素には固有の高さと幅があり、そのサイズが変更されないためです。
置換される要素の位置とサイズを決定する場合、関係する動作は次のルールで最も簡単に説明できます。 - width が auto に設定されている場合、使用される実際の幅は、要素のコンテンツの固有の幅によって決まります。
- 左から右に読む言語では、left の値が auto の場合、auto を静的な位置に置き換えます。右から左へも同じことが当てはまります
- left または right が auto のままの場合は、margin-left または margin-right の auto 値を 0 に置き換えます。 - この時点で margin-left と margin-right が両方とも auto として定義されている場合は、それらを等しい値に設定し、それによって要素が含まれるブロックの中央に配置されます
; - この後、auto 値が 1 つだけ残っている場合は、式の残りの部分と等しくなるように変更します。

12. Z 軸上の配置

は、属性 z-index

13 によって制御されます。固定配置

固定要素の包含ブロックがウィンドウであることを除いて、固定配置は絶対配置と非常に似ています。固定位置では、要素はドキュメント フローから完全に削除され、ドキュメントのどの部分にも相対的な位置がありません。

14. 相対位置決め

理解する最も簡単な位置決めメカニズムは相対位置決めです。この仕組みを採用した場合、位置決めされた要素は offset 属性を使用して移動されます。

以上がCSS のフローティングと配置の定義と使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。