Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang

青灯夜游asal: 2022-06-01 19:15:405164semak imbas

Dua kaedah: 1. Menggunakan atribut paparan, cuma tambahkan gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".

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

Dua cara untuk menyembunyikan elemen dalam css tanpa mengambil ruang

Kaedah 1: Gunakan atribut paparan

Hanya tetapkan gaya display:none; kepada elemen

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .display{
                display:none;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="display">隐藏元素</div>
        <div>正常显示元素</div>
    </body>
</html>

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang

Nota:

display:none boleh diletakkan tanpa memerlukan ruang. Tersembunyi, mengubah atribut ini secara dinamik akan menyebabkan penyusunan semula (tukar susun atur halaman), yang boleh difahami sebagai memadamkan elemen dari halaman itu tidak akan diwarisi oleh keturunan, tetapi keturunannya tidak akan dipaparkan semuanya disembunyikan.

Kaedah 2: Gunakan kedudukan dan atribut teratas

Hanya tambah gaya position: absolute;top: -9999px; pada elemen

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .position{
                position: absolute;
                top: -9999px;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="position">隐藏元素</div>
        <div>正常显示元素</div>
    </body>
</html>

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang

Penjelasan:

Kaedah ini adalah untuk mengeluarkan elemen daripada aliran dokumen (tanpa menduduki ruang) dengan menentukan kedudukan, dan kemudian menetapkan bahagian atas elemen kepada nombor negatif yang cukup besar untuk jadikannya pada skrin.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 继承 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：Bagaimana untuk menggunakan kaedah slice dalam jqueryArtikel seterusnya：Bagaimana untuk menggunakan kaedah slice dalam jquery

Artikel berkaitan

Lihat lagi