CSS の (表示、フロート、位置) についての深い理解

display は要素の表示モードを設定するために使用されます

display: block | none inline-block

inline: オブジェクトを inline 要素として指定します

block: オブジェクトを block 要素として指定します

-block: オブジェクトを指定します。 インライン ブロック要素の場合

none: オブジェクトを非表示にします

float は、要素がフローティングか表示されるかを制御します

float : none 右側のフローティング オブジェクトの目的:

は、デフォルトを破ることです文書の流れのルールを表示します。レイアウト要件に従って要素を表示したい場合。このとき、float 属性を使用する必要があります

1。float として宣言された要素は、自動的に「ブロックレベル要素」として設定されます

2。フローティング要素の後の要素は、フローティング要素が配置されるべき位置を占めます

3. フローティング要素を収容するのに十分な水平方向のスペースがない場合は、次の行に移動します

4.浮動要素

5. 浮動要素は左または右にのみ浮動可能です

clear : none left right | none | デフォルト値。浮遊オブジェクトは両側で許可されます

left: 浮遊オブジェクトは左側で許可されません

right: 浮遊オブジェクトは右側で許可されません

both: 浮遊オブジェクトは許可されません

position オブジェクトの配置方法

位置: 固定 | 相対

: デフォルト値。位置決めを行わない場合、オブジェクトは通常の流れに従います。このとき、4 つの位置決めオフセット属性は適用されません

relative: 相対的な位置決め、オブジェクトは通常のフローに従い、top、right、および 4 つの位置決めオフセット属性を通じて通常のフロー内の位置を参照してオフセットされます。下と左 タイムシフトは通常のフロー内のどの要素にも影響しません

absolute: オブジェクトは通常のフローの外にあります。このとき、offset 属性は、それ自体に最も近い位置にある祖先要素を参照します。は配置された祖先要素ではないため、常に body 要素に戻ります。ボックスのオフセット位置は、通常のフロー内のどの要素にも影響を与えず、そのマージンは他のマージンと折り合わされません。固定: 絶対と一致する固定位置ですが、オフセット位置はウィンドウに基づきます。スクロール バーが表示されると、オブジェクトはスクロールしません

絶対的な手順:

1. ドキュメント フローから離れる

2. 親要素の位置が固定の場合、ボディ座標の原点に基づいて配置します

4. 親要素の位置が相対的な場合、親要素は配置されます

例: p {position: left:100px;}

relative :

1. 相対的な配置 (元の位置を基準とした)

2. ドキュメント フローから逸脱しない

3. 上、下、左、右の配置については独自の静的位置を参照します

例: p { 位置: 相対; 左: 100ピクセル; トップ: 100ピクセル;}

固定 説明:

固定配置要素は、実際には、ブラウザ ウィンドウを基準として固定されます。要素は、ページがスクロールされても、ブラウザ ウィンドウ内の以前とまったく同じ場所に表示されます

例: p {position: right:0;bottom:0;}

z-indexオブジェクトの順序

z-index: auto |number

要素が重なる場合、z-index 属性を使用して重なり順を設定できます

より大きな数値を持つオブジェクトは、より小さな数値を持つオブジェクトに重ねられます

上記 CSS (表示、フロート、位置) の詳細な理解は、エディターによって共有されたすべての内容です。参考になれば幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSS (表示、浮動小数点、位置) 関連記事をさらに深く理解するには、PHP 中国語 Web サイトに注目してください。