ホームページ > 記事 > ウェブフロントエンド > CSS のフローティングと配置の定義と使用法の概要
1. フローティング要素について覚えておくべきことがいくつかあります。
まず、フローティング要素は何らかの方法でドキュメントの通常のフローから削除されます。レイアウトに影響を与える
2. CSS の独自の方法を採用し、フローティング要素はほぼ「独自のグループ」に属しますが、要素がフローティングされると他の要素に影響を与えます。要素は要素を「囲みます」。フローティング要素の周囲のマージンはマージされません。
4. フローティングなし: float:none は要素がフローティングになるのを防ぐために使用されます。
浮動要素を含むブロックは、最も近いブロックレベルの祖先要素です。
css は、浮動要素の配置を制御するための一連のルールを提供します。
CSS2.1 は、float 要素の動作の 1 つの側面を明確にしています。float 要素は、その子孫の float 要素をすべて含むように拡張されます。
そのため、親要素をフローティング要素として設定することで、その親要素内にフローティング要素を含めることができます。
このルールは前のルールと矛盾しているように見えます (浮動要素は親要素の外側に配置されます)。しかし、前のセクションのルールを注意深く検討すると、これが実際には技術的に許可されていることがわかります。フローティング要素のコンテンツは親要素内にある必要がありますが、マージンが負であるため、フローティング要素のコンテンツは、それ自体の外側の境界をカバーするかのように配置されます。
5. フローティング要素、コンテンツ、オーバーラップ
2. 位置決め
2. 配置タイプ
絶対:
要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロック (ドキュメント内の別の要素または最初の要素を含むブロックである可能性があります) に対して相対的に配置されます。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。ブロックレベルのボックスは、通常のフローで最初に生成されたボックスのタイプに関係なく、要素が配置された後に生成されます。
修正:
要素ボックスは位置を絶対に設定するように動作しますが、その要素ボックスを含むブロックはウィンドウ自体です。
浮動要素の場合、包含ブロックは最も近いブロックレベルの祖先要素として定義されます。
位置決めの場合、状況はさらに複雑になります:
- 「ルート要素」の包含ブロック (初期包含ブロックとも呼ばれます) は、ユーザー エージェントによって確立されます。HTML では、ルート要素は html 要素ですが、一部のブラウザでは、ルート要素として body が使用されます。
- 位置値が相対的または静的である非ルート要素の場合、それを含むブロックは、最も近いブロック レベルのボックス、テーブル セル、またはインライン ブロックの祖先ボックスの内容によって境界されます。
- 非ルート要素の場合、その位置値が絶対値である場合、それを含むブロックは、位置値が静的ではない最も近い祖先要素に設定されます。特性4. offset 属性 3 つの位置決めメカニズムを導入しました。位置決め要素を記述するために 4 つの属性が使用されます。これら 4 つのプロパティをオフセット プロパティと呼びます。これらは位置決めを完了するための重要な部分です。
5. 幅と高さ
幅と高さを設定する
同様に、属性 max-width と max-height を使用して要素のサイズを制限することもできます。
オーバーフロー
要素のコンテンツは要素のボックスの境界で切り取られますが、ユーザーが使用できるスクロール メカニズムが提供されています。
7. コンテンツのクリッピング
絶対的に配置された要素のコンテンツがコンテンツ ボックスからオーバーフローし、コンテンツのクリップを要求するようにオーバーフローが設定されている場合は、clip 属性を使用してクリッピング領域の形状を変更できます。
clip:rect(top,right,bottom,left);
可視性:
- 見える
visibility:collapse
テーブル要素内で使用すると、この値は行または列を削除しますが、テーブルのレイアウトには影響しません。行または列が占めるスペースは、他のコンテンツに使用できます。この値が別の要素で使用される場合、その値は「非表示」として表示されます。
visibility:hidden
可視性を設定して要素が「非表示」状態になっている場合でも、要素は依然として表示されているかのようにドキュメントのレイアウトに影響を与えます。言い換えれば、要素はまだ存在しており、目に見えないだけです。これは、表示されないだけでなく、display:none とは異なります。ドキュメントからも削除されるため、ドキュメントのレイアウトには影響しません。
9. 絶対配置
ブロックと絶対配置要素を含む 要素が絶対配置されると、その要素はドキュメント フローから完全に削除されます。次に、それを含むブロックに対して相対的に配置されます。これは、絶対的に配置された要素が他の要素を覆ったり、他の要素によって覆われたりする可能性があることを意味します。
一般に、要素のサイズと位置は、その要素を含むブロックによって異なります。各属性の値もある程度の影響を与えますが、最も重要なのはその属性を含むブロックです。
置換されない要素と置換される要素の配置ルールは大きく異なります。これは、置換された要素には固有の高さと幅があり、そのサイズが変更されないためです。
置換される要素の位置とサイズを決定する場合、関係する動作は次のルールで最も簡単に説明できます。
- width が auto に設定されている場合、使用される実際の幅は、要素のコンテンツの固有の幅によって決まります。
- 左から右に読む言語では、left の値が auto の場合、auto を静的な位置に置き換えます。右から左へも同じことが当てはまります
- left または right が auto のままの場合は、margin-left または margin-right の auto 値を 0 に置き換えます。
- この時点で margin-left と margin-right が両方とも auto として定義されている場合は、それらを等しい値に設定し、それによって要素が含まれるブロックの中央に配置されます
;
- この後、auto 値が 1 つだけ残っている場合は、式の残りの部分と等しくなるように変更します。
12. Z 軸上の配置
13 によって制御されます。固定配置
14. 相対位置決め
以上がCSS のフローティングと配置の定義と使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。