CSS での配置とレイアウトの詳細を詳細に分析して理解する-CSSチュートリアル-php.cn

CSS での配置とレイアウトの詳細を詳細に分析して理解する

WBOY

リリース： 2021-12-22 18:32:08

オリジナル

1768 人が閲覧しました

この記事では、CSS の配置とレイアウトに関する関連知識を提供します。相対配置、絶対配置、固定配置とは何か、さまざまな要素のプロパティと用途、その他の知識を見てみましょう。皆様のお役に立てれば幸いです。。

CSS での配置とレイアウトの詳細を詳細に分析して理解する

1. 相対位置決め

1.1) 相対位置決めとは

相対位置決め: ボックスは元の位置に応じて調整できます。 (位置記述子を通じて達成されます)。

位置記述子:
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>

ログイン後にコピー

CSS での配置とレイアウトの詳細を詳細に分析して理解する p を相対位置に設定します:

p {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: relative;
    top: 50px;
    left: 50px;}

ログイン後にコピー

CSS での配置とレイアウトの詳細を詳細に分析して理解する

1.2) 相対配置の性質と使用法

プロパティ

相対的に配置された要素は、本質的には依然として In です。元の位置にある場合は、新しい場所にレンダリングされるだけで、ページの他の要素には影響しません。

#目的

例:

<!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;
        }

        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></head><body>
    <nav>
        <ul>
            <li>
                <a href="#">导航一</a>
            </li>
            <li>
                <a href="#">导航二</a>
            </li>
            <li>
                <a href="#">导航三</a>
            </li>
            <li>
                <a href="#">导航四</a>
            </li>
            <li>
                <a href="#">导航五</a>
            </li>
        </ul>
    </nav></body></html>

ログイン後にコピー

このときの効果は次のようになります:

CSS での配置とレイアウトの詳細を詳細に分析して理解するマウスをホバーするとわかります。 相対位置を設定して微調整すると、次のようになります:

nav ul li a:hover {
    border-top: 3px solid red;
    position: relative;
    top: -3px;}

ログイン後にコピー

CSS での配置とレイアウトの詳細を詳細に分析して理解するこれで問題は解決します

2. 絶対位置決め

2.1) 絶対位置決めとは

絶対位置決め: ボックスはその位置を座標で記述し、独自の絶対位置を持ちます。

絶対配置参照ボックス: 絶対配置ボックスは、祖先要素の中で配置属性を持つ最も近いボックスを参照点として使用します。

このボックスは通常、相対的に配置されるため、「息子は父親である必要がある」とも呼ばれます。

位置記述子: 左: 左への距離; 右: 右への距離; 上: 上への距離; 下: までの距離一番下

例:

<!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: absolute;
            width: 500px;
            height: 300px;
            left: 200px;
            top: 100px;
            background-color: antiquewhite;
        }
    </style></head><body>
    <p class="box">
    </p></body></html>

ログイン後にコピー

2.2) 絶対配置の性質と使用法

絶対配置ボックスは垂直方向の中央に配置されます:

.box {
	position: absolute;
	top: 50%;
	margin-top: -自己高度一半;}

ログイン後にコピー

絶対配置ボックスは水平方向の中央に配置されます:

.box {
	position: absolute;
	left: 50%;
	margin-left: -自己宽度一半;}

ログイン後にコピー

スタッキング順序 z-index 属性

##絶対配置の設定要素の重なり順

は単位のない正の整数値が大きいほど小さい値が抑制される(つまり、大きい値が上層に表示される)
 
例:

<!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;
        }

        .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></head><body>
    <p class="box1"></p>
    <p class="box2"></p></body></html>

ログイン後にコピー

このときの効果は以下の通りです:

<br/>

ログイン後にコピー

今回はbox1を上の階層に表示したいのでzを設定します-index 属性。

.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;}

ログイン後にコピー

効果を見てください:

CSS での配置とレイアウトの詳細を詳細に分析して理解する

使用法

CSS スプライトと組み合わせて使用できます

JS と組み合わせてアニメーションを実現できます 3. 固定位置

3.1) 内容固定位置です

固定位置: ページがどのようにスクロールしても、常にページが参照点として取得され、そこに固定されます。

位置記述子:

左: 左への距離; 右: 右への距離; 上: 上への距離; 下: 下への距離

.box {
	position: fixed;
	top: 100px;
	left: 100px;}

ログイン後にコピー

3.2) 固定位置の性質と使用法

## を使用すると、一部の要素が常に現在のウィンドウの前面に表示されるようにすることができます。たとえば、ページを閲覧する際の「トップに戻る」ボタンなどです。ページは常に現在のページのどこかに表示されます。位置

例:

<!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 ビデオチュートリアル