ホームページ > 記事 > ウェブフロントエンド > CSS での配置とレイアウトの詳細を詳細に分析して理解する
この記事では、CSS の配置とレイアウトに関する関連知識を提供します。相対配置、絶対配置、固定配置とは何か、さまざまな要素のプロパティと用途、その他の知識を見てみましょう。皆様のお役に立てれば幸いです。 。
相対位置決め: ボックスは元の位置に応じて調整できます。 (位置記述子を通じて達成されます)。
位置記述子:
left: 右に移動、right が左に移動、上が下に移動、下が上に移動
(内部の値が負の数の場合) 、反対方向に移動します)
例:
オリジナル:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>相对定位</title> <style> * { margin: 0; padding: 0; } p { width: 500px; height: 500px; border: 1px solid #000; margin: 50px auto; } p { width: 100px; height: 100px; background-color: lightblue; position: relative; top: 50px; left: 50px; } </style></head><body> <p> <p></p> </p></body></html>
p を相対位置に設定します:
p { width: 100px; height: 100px; background-color: lightblue; position: relative; top: 50px; left: 50px;}
プロパティ
#目的
nbsp;html> <meta> <meta> <meta> <title>相对定位</title> <style> * { margin: 0; padding: 0; } nav { width: 780px; height: 50px; margin: 40px auto; } nav ul { list-style: none; } nav ul li { float: left; width: 156px; height: 50px; line-height: 50px; text-align: center; } nav ul li a { display: block; width: 156px; height: 50px; background-color: lightcyan; color: #000; text-decoration: none; } nav ul li a:hover { border-top: 3px solid red; } </style> <nav> <ul> <li> <a>导航一</a> </li> <li> <a>导航二</a> </li> <li> <a>导航三</a> </li> <li> <a>导航四</a> </li> <li> <a>导航五</a> </li> </ul> </nav>このときの効果は次のようになります:
マウスをホバーするとわかります。
相対位置を設定して微調整すると、次のようになります:
nav ul li a:hover { border-top: 3px solid red; position: relative; top: -3px;}
これで問題は解決します
絶対配置参照ボックス: 絶対配置ボックスは、祖先要素の中で配置属性を持つ最も近いボックスを参照点として使用します。
このボックスは通常、相対的に配置されるため、「息子は父親である必要がある」とも呼ばれます。
位置記述子: 左: 左への距離; 右: 右への距離; 上: 上への距離; 下: までの距離一番下
nbsp;html> <meta> <meta> <meta> <title>绝对定位</title> <style> * { margin: 0; padding: 0; } .box { position: absolute; width: 500px; height: 300px; left: 200px; top: 100px; background-color: antiquewhite; } </style> <p> </p>2.2) 絶対配置の性質と使用法
絶対配置ボックスは垂直方向の中央に配置されます:
.box { position: absolute; top: 50%; margin-top: -自己高度一半;}
絶対配置ボックスは水平方向の中央に配置されます:
.box { position: absolute; left: 50%; margin-left: -自己宽度一半;}
は単位のない正の整数 値が大きいほど小さい値が抑制される(つまり、大きい値が上層に表示される)例:
nbsp;html> <meta> <meta> <meta> <title>绝对定位</title> <style> * { margin: 0; padding: 0; } .box1 { width: 300px; height: 300px; position: absolute; left: 100px; top: 100px; background-color: antiquewhite; } .box2 { width: 300px; height: 300px; position: absolute; left: 200px; top: 200px; background-color: lightblue; } </style> <p></p> <p></p>
このときの効果は以下の通りです:
<br/>
.box1 { width: 300px; height: 300px; position: absolute; left: 100px; top: 100px; background-color: antiquewhite; z-index: 100;}.box2 { width: 300px; height: 300px; position: absolute; left: 200px; top: 200px; background-color: lightblue; z-index: 1;}
JS と組み合わせてアニメーションを実現できます
3. 固定位置
左: 左への距離; 右: 右への距離; 上: 上への距離; 下: 下への距離
.box { position: fixed; top: 100px; left: 100px;}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定定位</title> <style> * { margin: 0; padding: 0; } .box { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; background-color: rgba(78, 209, 226, 0.5); cursor: pointer; font-size: 24px; } </style></head><body> <a class="box">^</a> <p> <img src="https://dummyimage.com/600x400/00bcd4/fff" alt=""> </p> <p> <img src="https://dummyimage.com/600x400/00bcd4/fff" alt=""> </p> <p> <img src="https://dummyimage.com/600x400/00bcd4/fff" alt=""> </p></body></html>効果は次のとおりです:
ページが一番下に移動すると、戻る位置が決まります。右下隅の上部ボタンは変更されません。
ご興味がございましたら、引き続き css ビデオ チュートリアル
以上がCSS での配置とレイアウトの詳細を詳細に分析して理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。