Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang

青灯夜游

Lepaskan： 2022-06-01 19:34:40

asal

5382 orang telah melayarinya

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

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!