ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3のポジショニングとフローティングの解析
CSS3のポジショニングとフローティングの解析
- 不言オリジナル
- 2018-06-20 17:44:142637ブラウズ
この記事では主に 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. Floatingfloat 属性で使用可能な値: left/right/none/ 継承: 左または右、浮動ではなく、親から継承されます。
*フロート
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 サイトの他の関連記事を参照してください。