この記事では主に CSS3 の位置決めとフローティングの概念を詳しく紹介し、CSS3 の位置決めとフローティングの使用方法を説明するサンプルコードも紹介します。興味のある方は参考にしてください
この記事では CSS3 の位置決めとフローティングの基本を共有します。概念と使い方は以下の通りです
1. CSSの配置: ページ上の要素の位置を変更します
2. CSS 配置メカニズム:
通常のフロー: フローティング:絶対レイアウト:
3. CSS 配置属性: position は要素を静的、相対、絶対、または固定位置に配置しますtop /left/right/bottom 要素の up/left/right/bottom オフセット
overflow は要素がその領域をオーバーフローしたときの動作を設定しますclip は要素表示の形状を設定します vertical-align は要素表示の配置を設定します z -index は要素の重なり順を設定します/要素の重なり順の設定に使用され、大きいほど高くなります/
position のプロパティ
static static (デフォルト)
relative 相対レイアウト (デフォルト)
絶対的な絶対レイアウト (他のタグは関係ありません)
固定 固定 (ページのスクロールとともに移動しません)
<body> <p id="position1"></p> <p id="position2"></p> <script> for (var i=0;i<100;i++){ document.write(i+"<br/>") } </script> </body> #position1{ width: 100px; height: 100px; background-color: blue; position: relative; left: 20px; top: 20px; /*用来设置元素的堆叠顺序,越大越在上方*/ z-index: 2; }#position2{ width: 100px; height: 100px; background-color: red; position: relative; left: 30px; top: 10px; z-index: 1; }
*フロート
1.フローティング後、通常の流れから離れてフローティングフローに配置します。任意の要素はブロック要素として表示され、幅と高さを設定でき、コンテンツによって幅が拡張されます。 2. 多くのフローティングブロックが一緒にある場合、ラインを変更する必要がある場合は、同じフローティング方向を持つ最も近いブロックを常に見つけて、最も近い要素の高さに基づいて新しいラインを開始します。
clear 属性: フローティング属性を削除します (継承を含む)
float をクリアする必要がある状況:
子ラベルがフローティングされた後、親ラベルは展開できないため、フロートをクリアする必要があります。
2.overflow:hidden; トリガー レイアウトは、コンテンツのフローティングをクリアするためによく使用されます。
3.after pseudo-object: set
.aa {display:block;} 現在のオブジェクトに対して ie6 をトリガーする方法を見つけます レイアウト レンダリング メカニズムは、幸運によって多くのバグを解決し、zoom: 1 をトリガーできます。 ! ! inline-block は内部ブロックと外部行を対象とします。
5.position:absolute;display: inline は、IE6 の二重バグを解決できます。
display: inline-block は、内部ブロックと外部行用です。
可視性
: なし
非表示ですが、スペースを占有し、レイアウトに影響します
関連する推奨事項: CSS でフロートの折りたたみをクリアする方法について
以上がCSS3のポジショニングとフローティングの解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。