Rumah > Artikel > hujung hadapan web > Adakah terapung menduduki kedudukan dalam css3?

Adakah terapung menduduki kedudukan dalam css3?

青灯夜游asal: 2021-12-16 11:18:542642semak imbas

Terapung menduduki kedudukan dalam css3. Elemen terapung boleh melepaskan diri daripada aliran dokumen standard dan menyingkirkan sekatan elemen peringkat blok dan elemen sebaris, tetapi ia tidak melepaskan diri daripada aliran teks, jadi ia masih akan menduduki kedudukan itu, dan kandungan teks lain akan diteruskan untuk disusun mengikut urutan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Terapung menduduki kedudukan dalam css3.

Ciri-ciri elemen terapung:

1 singkirkan Sekatan pada elemen peringkat blok dan elemen sebaris

2. Elemen terapung mempunyai kesan melekat antara satu sama lain Apabila lebar tidak mencukupi, pembalut garisan automatik akan berlaku

3 . Walaupun elemen terapung dipisahkan Aliran dokumen standard, tetapi ia tidak terlepas daripada aliran teks, dan kesan dikelilingi oleh perkataan kelihatan

apung mempunyai fungsi yang sama untuk melepaskan diri daripada aliran dokumen seperti position:absolute

Elemen terapung tidak boleh dilihat dalam kotak lain, tetapi teks dalam kotak lain boleh dilihat

terapung:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动float和absolute区别</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        .first {
            width: 150px;
            height: 100px;
            /*float: left;*/
            display: inline-block;
            background: pink;
            border: 10px solid red;    /*增加了边框*/
        }
        .second {
            width: 100px;
            height: 100px;
            background: blue;
            display: inline-block;
            float: left;　　　　　　/*只设置一个浮动*/
        }
        .third{
            width: 50px;
            height: 100px;
            /*float: left;*/
            display: inline-block;
            background: green;
        }
    </style>
</head>

<body>
 <div>
    <div>123</div>
    <div>456</div>
    <div>789</div>
 </div>
</body>
</html>

Tukar tetapan pada baris 27 kepada

Seperti yang ditunjukkan di bawahposition:absolute;

Tukar tetapan pada baris 27 kepada

tambah position:absolute;; seperti yang ditunjukkan di bawahleft:0

Contoh 3. Perbandingan tanpa aliran dokumen

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动float和absolute区别</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        .first {
            width: 150px;
            height: 100px;
            /*float: left;*/
            display: inline-block;
            background: pink;
            border: 10px solid red;    /*增加了边框*/
        }
        .second {
            width: 100px;
            height: 100px;
            background: blue;
            display: inline-block;
            position: absolute;
            left:0;
            opacity: 0.8
            /*float: left;*/

        }
        .third{
            width: 50px;
            height: 110px;
            float: left;
            display: inline-block;
            background: green;
            /*position: absolute;*/
        }
    </style>
</head>

<body>
 <div>
    <div>123</div>
    <div>456</div>
    <div>789</div>
 </div>
</body>
</html>

Mutlak mempunyai keutamaan yang lebih tinggi daripada aliran dokumen

Penghuraian terapung

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{width:500px;height:500px;border: 5px solid green;}
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            float:left;    /*左浮动*/

        }
        .second {
            width: 150px;
            height: 100px;
            border: 3px solid blue;
            
        }
        .third{
            width: 110px;
            height: 100px;
            border: 3px solid grey;
            float:left;    /*左浮动*/
        }
    </style>
</head>
 
<body>
 <div>
    <div>123</div>
    <div>456</div>
    <div>789</div>
 </div>
 <div>我是文字</div>
</body>

Rendering:

Dalam gambar

Elemen pertama mempunyai sempadan merah - terapung kiri

Elemen kedua mempunyai sempadan biru

Elemen ketiga mempunyai sempadan kelabu - terapung kiri

Nota: terapung bermaksud Ia bermakna melepaskan diri daripada aliran dokumen Apakah yang terapung daripada aliran dokumen? Seperti namanya, terapung adalah bersamaan dengan mengapungkan elemen di atas unsur terapung (sama seperti elemen tidak terapung mewakili bumi, terapung bersamaan dengan awan putih terapung di langit dan anda sedang menghadap bumi dari ketinggian yang lebih tinggi daripada awan putih Apabila anda melihat ke bawah, tanah itu dilitupi oleh awan putih anda hanya boleh melihat awan putih tetapi bukan bumi Sempadan. Perkara yang peliknya ialah tiada kandungan teks yang berada di luar apungan Melalui ini, anda mungkin tahu perbezaan antara apungan dan mutlak, yang berada di luar aliran dokumen.

Melihat perkara ini, anda mungkin tertanya-tanya mengapa sempadan kelabu elemen ketiga berada di tengah-tengah kotak merah dan bukannya di atasnya?

Jawapan: Elemen kedua tidak terapung Elemen ketiga diapungkan dalam susunan dan kedudukan apungan kedua Elemen ketiga hanya boleh diapungkan apabila elemen keempat tidak ditetapkan kedudukan:

Terapung juga akan menduduki kedudukan asal

Kedudukan akan dipisahkan daripada aliran dokumen dan tidak akan menduduki kedudukan asal
Jika ketiga-tiga elemen itu semua ditetapkan untuk terapung, ia akan disusun bersebelahan dalam satu baris Masalahnya ialah ketinggian elemen induk (tanpa menetapkan lebar dan ketinggian) akan runtuh, menyebabkan sempadan bergabung Penyelesaiannya adalah untuk membersihkan terapung.

Fungsi asal terapung terapung adalah untuk mencapai kesan pembalut teks

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Adakah terapung menduduki kedudukan dalam css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 Float display position

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah sifat css3 yang menetapkan ketelusan elemen?Artikel seterusnya：Apakah sifat css3 yang menetapkan ketelusan elemen?

Artikel berkaitan

Lihat lagi