フロートと位置の比較
1.フロート
ブロックレベルのボックスをインライン属性に変更するには、display を使用してスペースを解析する必要があります。
インライン ブロックの本質: インライン要素です
インライン要素の配置: ベースラインの配置
xhgf: x の下 2 フィートによって形成される線がベースラインです
- ボックスにコンテンツがない場合、下がベースラインになります
- ボックスにコンテンツがある場合、ボックス内のテキストの最下行のベースラインが優先されます。
この手のレイアウトは面倒なので、vertical-align:bottom; と設定すればボックスを横に揃えることができるので、display を使って横にレイアウトする必要はありません。
もともとグラフィックのラッピングに使用されていたエフェクトを実行するには、フローティングの使用を選択します。
フローティングでは、要素を元の位置から外したり、元の配置ルール (ブラウザのデフォルトの順序付けルール) から外したり、コンテンツ領域の境界線に触れるまで親要素のコンテンツ領域内で左または右に移動したりできます。親要素または他の浮動要素の。主にブロック要素の水平方向の配置を設定するために使用されます。
属性: フロート
| 価値 | 説明 |
|---|---|
| 左 | 要素は左にフロートします |
| 右 | 要素が右に浮く |
- フロートに設定された要素は元の位置からフロー外になり、ドキュメント内のスペースを占有しなくなります。
- フローティングを見つけるためにフローティングすると、次のフローティング要素は前のフローティング要素の後ろで左右にフローティングしますが、2 つのフローティング ボックスは重なり合ったり、お互いを覆ったりしないことになっています。
- どのラベルでもフローティング属性を追加でき、フローティング ラベルはインライン ブロックの特性を持ち、1 行で表示でき、幅と高さを設定できます。ただし、インライン ブロックよりも高度であり、ラベルをラップするスペースがありません。
- フローティング要素は通常の要素の位置をブロックしますが、通常のコンテンツの表示をブロックすることはできません。フローティング要素の周囲に表示されるコンテンツはボックスの背景のみをカバーし、適切なコンテンツとテキストはフローティングしてオーバーフローします (テキスト レベルは比較的高い)
フロートをクリアする:
フローティングの影響をクリアします。
親要素の高さが設定されていない場合、高さはドキュメント フローのコンテンツによって引き伸ばされます。そして、子要素がフローティングになると、ドキュメント フローから切り離されるため、親レベルの高さは引き伸ばされず、非フローティング要素によって押しつぶされて、必要な位置から離れてしまいます。これはその後のレイアウト構造の原因となるため、非常に面倒です。
- コンテンツが固定された要素の場合、子要素がすべてフローティングの場合は、親要素の高さを固定できます (例: ナビゲーション バー)。
- 一部のレイアウトでは
- 空のブロック要素を親要素の最後に追加します。クリア:両方を設定; フロートをクリア
- 親要素に overflow:hidden を設定します。ソリューションの高さは 0 です。
2. 位置決め
ポジショニングとフローティングは要素の位置を巨視的に調整するために使用され、マージンはボックス間の関係を調整するために使用されます。
CSS のposition 属性は、ページ上の要素の位置を設定するために使用され、適切と思われる任意の位置に任意の属性を配置できます。位置属性はさまざまな位置決め方法に対応します
1 つの方法は次のように設定することです。ただし、ページがより複雑になります。
最初に位置を設定し、次に左、右、上、下を通じて位置要素の特定の位置を設定できます。
移動されたピクセル数を示すために left などの特定の値を渡すことも、パーセンテージで渡すこともできます (左: 50% は、長方形ボックスの左上のドットがピクセルの半分に移動したことを意味します)ページ）
<style>
.clearfix {
clear : both;
}
</style>
-
相対的な相対位置:要素の相対位置は、ドキュメント フローから離れることなく、ドキュメント内の要素の元の位置を参照することでオフセットできます。
- 要素の相対位置決めが有効になった後は、オフセットを設定しない限り変更はありません
- 相対位置決めは自身の位置を参照して位置決めします
- ドキュメント フローから切り離されることはなく、相対移動後のページのレイアウトには影響しませんが、ページ上のボックスの位置は変更されます。
- 要素自体、ブロック レベルまたはブロック レベル、インラインまたはインラインの変更の性質には影響しません。
- 大きな位置調整には不向き、小さな可動範囲に適しています
-
絶対的な絶対配置:絶対的に配置された要素は、最も近い位置にある祖先要素を参照してオフセットされます。そうでない場合は、ブラウザ ウィンドウを参照として使用し、ウィンドウを参照してオフセットされます。
- 絶対的に配置された要素はフローから外れ、その位置が保持されず、テキストを覆います (配置のレベルはテキストのレベルよりも高くなります)。
- ドキュメント内のスペースを占有せず、幅と高さを手動で設定できます
- これにより積み重ね順序が決まります
「子に対する相対的な父」: 親要素の相対位置、子要素の絶対位置を設定し、位置決めされた親要素のオフセットを参照します。
-
**固定位置: **位置はウィンドウを参照し、Web ページのスクロールに従わずにスクロールします。ドキュメント フロー参照のうち、ブラウザ自体、参照、ナビゲーション バーは参照されません。
位置決めされた要素は、offset プロパティを使用して距離参照オブジェクトの位置を調整できます。
配置方法を設定するだけではページ上での効果は確認できません。要素を移動したい場合は 4 つの属性を設定する必要があります
top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧
重ね順
要素が積み重ねられている場合、z-index 属性を使用して、配置された要素の表示位置を調整できます。値が大きいほど、要素が上に表示されます。
- 属性: z-index
- 値: 単位のない値、値が大きいほど値が高くなります
- スタック：
- 位置決めされた要素はドキュメント内で通常の要素と積み重ねられ、位置決めされた要素は常に一番上に表示されます。
- 同じ位置にある要素は、HTML コードの記述順に従ってスタックされ、後のものが最初になります。
次のように配置してボックスを中央に配置します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过定位将盒子居中</title>
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 500px;
margin-left: -250px;
margin-top: -250px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
具体的な効果:
画面のサイズをどのように調整しても、ボックスは常に中央の位置にあります。
