Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS-tutorial css-php.cn

Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS

WBOY

Lepaskan： 2021-12-22 18:32:08

asal

1769 orang telah melayarinya

Artikel ini membawakan anda pengetahuan yang berkaitan tentang reka letak kedudukan CSS Mari kita lihat apakah kedudukan relatif, kedudukan mutlak dan kedudukan tetap, sifat dan kegunaan elemen yang berbeza, dsb. Kami berharap ia dapat membantu semua orang.

Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS

1. Kedudukan relatif

1.1) Apakah itu kedudukan relatif

Kedudukan relatif: Kotak boleh diletakkan mengikut kedudukan asalnya (Dicapai melalui deskriptor kedudukan).

Deskriptor kedudukan:
kiri: bergerak ke kanan; atas bergerak ke bawah; , Bergerak ke arah bertentangan)

Contohnya:

Asal:

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

Salin selepas log masuk

Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS Tetapkan p kepada kedudukan relatif:

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

Salin selepas log masuk

Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS

1.2) Sifat dan kegunaan penentududukan relatif

Sifat

Tujuan

Contohnya:

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

Salin selepas log masuk

Kesan pada masa ini adalah seperti ini:

Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS Anda akan mendapati bahawa apabila tetikus melayang di atas, kawasan navigasi akan Tenggelam Selepas kami menetapkan kedudukan relatif untuknya dan memperhalusinya:

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

Salin selepas log masuk

Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS Ini akan menyelesaikan masalah tadi

2. Kedudukan mutlak

2.1) Apakah kedudukan mutlak

Kedudukan mutlak: Kotak menerangkan kedudukannya dengan koordinat dan mempunyai kedudukan mutlaknya sendiri.

Kotak rujukan berkedudukan mutlak: Kotak berkedudukan mutlak akan menggunakan kotak terdekat dengan atribut kedudukan antara elemen moyangnya sebagai titik rujukan.

Kotak ini biasanya mempunyai kedudukan yang agak, jadi ia juga dipanggil "penampilan ayah anak".

Penerangan kedudukan: kiri: jarak ke kiri: jarak ke kanan: jarak ke atas; bahagian bawah

Contohnya:

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

Salin selepas log masuk

2.2) Sifat dan penggunaan kedudukan mutlak

Kotak kedudukan mutlak berpusat menegak: < .

Tetapkan susunan susunan elemen yang diletakkan secara mutlak

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

Salin selepas log masuk

ialah integer positif tanpa unit Nilai yang lebih besar boleh menekan nilai yang lebih kecil (iaitu, nilai yang lebih besar dipaparkan pada lapisan atas)

. Contohnya:

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

Salin selepas log masuk

Lihat kesannya:

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

Salin selepas log masuk

Penggunaan

Kedudukan mutlak digunakan untuk "menutup" , Kesan "topeng"

<br/>

Salin selepas log masuk

boleh digunakan bersama dengan sprite CSS

dan boleh digabungkan dengan JS untuk melaksanakan beberapa animasi

3. Kedudukan tetap

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

Salin selepas log masuk

3.1) Apakah kedudukan tetap Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS Kedudukan tetap: Tidak kira bagaimana halaman menatal, ia akan sentiasa menjadikan halaman sebagai titik rujukan dan ditetapkan di sana.

Penerangan kedudukan:

kiri: jarak ke kiri; 🎜>

3.2) Sifat dan penggunaan kedudukan tetap

boleh digunakan untuk mencapai bahawa sesetengah elemen harus sentiasa muncul di hadapan tetingkap semasa, seperti butang kembali ke atas semasa menyemak imbas halaman, yang akan sentiasa muncul pada halaman semasa Kedudukan tertentu

Contohnya:

Kesannya adalah seperti berikut:

Apabila halaman pergi ke bahagian bawah, kedudukan butang kembali ke atas di sudut kanan bawah kekal tidak berubah.

Jika berminat, boleh terus layari:

tutorial video css

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

Salin selepas log masuk

Atas ialah kandungan terperinci Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!