CSS3のポジショニングとフローティングの解析-CSSチュートリアル-php.cn

CSS3のポジショニングとフローティングの解析

不言

リリース： 2018-06-20 17:44:14

オリジナル

2601 人が閲覧しました

この記事では主に 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;   
}

ログイン後にコピー

2. Floating

float 属性で使用可能な値:

left/right/none/ 継承: 左または右、浮動ではなく、親から継承されます。

*フロート

1.フローティング後、通常の流れから離れてフローティングフローに配置します。任意の要素はブロック要素として表示され、幅と高さを設定でき、コンテンツによって幅が拡張されます。 2. 多くのフローティングブロックが一緒にある場合、ラインを変更する必要がある場合は、同じフローティング方向を持つ最も近いブロックを常に見つけて、最も近い要素の高さに基づいて新しいラインを開始します。
clear 属性: フローティング属性を削除します (継承を含む)

意味は上記の対応する属性と同じです

float をクリアする必要がある状況:

子ラベルがフローティングされた後、親ラベルは展開できないため、フロートをクリアする必要があります。

以前のフローティング要素の影響を受けないようにする場合は、フロートをクリアする必要があります。 :hidden;

2.overflow:hidden; トリガーレイアウトは、コンテンツのフローティングをクリアするためによく使用されます。
3.after pseudo-object: set

.aa:after {content:”.”} ;}

.aa {display:block;} 現在のオブジェクトに対して ie6 をトリガーする方法を見つけますレイアウトレンダリングメカニズムは、幸運によって多くのバグを解決し、zoom: 1 をトリガーできます。！！ inline-block は内部ブロックと外部行を対象とします。

5.position:absolute;

display: ブロックはブロック要素として表示されます。 display: none コンテンツは消えません。スペースを占有しません。

display: inline は、IE6 の二重バグを解決できます。
display: inline-block は、内部ブロックと外部行用です。

可視性

: なし
非表示ですが、スペースを占有し、レイアウトに影響します

上記がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。

関連する推奨事項: CSS でフロートの折りたたみをクリアする方法について