Apakah cara untuk menyembunyikan elemen dalam CSS?

CSS boleh menyembunyikan elemen menggunakan paparan, keterlihatan, kelegapan, kedudukan, laluan klip, indeks-z dan kaedah atribut lain. Pengenalan terperinci: 1. paparan, tetapkan atribut paparan elemen kepada tiada, anda boleh menyembunyikan elemen sepenuhnya, yang bermaksud bahawa elemen itu tidak akan menduduki ruang pada halaman dan tidak akan memberi kesan kepada elemen lain; tetapkan keterlihatan elemen Jika harta ditetapkan kepada tersembunyi, elemen boleh disembunyikan tetapi ia akan mengambil ruang, dsb.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

CSS mempunyai pelbagai cara untuk menyembunyikan elemen, dan kaedah ini sesuai untuk senario dan keperluan yang berbeza. Berikut ialah beberapa kaedah yang biasa digunakan:

1 paparan: tiada

Gunakan atribut paparan untuk menetapkan atribut paparan elemen kepada tiada untuk menyembunyikan elemen sepenuhnya. Ini bermakna elemen tersebut tidak mengambil ruang pada halaman dan tidak mempunyai sebarang kesan pada elemen lain. Contohnya:

.element {
  display: none;
}

2 keterlihatan: tersembunyi;

Gunakan atribut keterlihatan untuk menetapkan keterlihatan elemen kepada tersembunyi, yang boleh menyembunyikan elemen tetapi masih menempati ruang. Ini bermakna elemen itu tidak kelihatan pada halaman, tetapi masih mempengaruhi reka letak elemen lain. Contohnya:

.element {
  visibility: hidden;
}

3 kelegapan: 0;

Gunakan atribut kelegapan untuk menetapkan ketelusan elemen kepada 0 untuk menjadikan elemen telus sepenuhnya. Ini bermakna elemen itu tidak kelihatan pada halaman, tetapi masih menggunakan ruang dan mempunyai kesan pada elemen lain. Contohnya:

.element {
  opacity: 0;
}

4 kedudukan: mutlak;

Gunakan atribut kedudukan untuk menetapkan mod kedudukan elemen kepada mutlak dan alihkan kedudukannya keluar dari kawasan yang boleh dilihat untuk menyembunyikan elemen. Ini bermakna elemen itu tidak kelihatan pada halaman dan tidak mempunyai sebarang kesan pada elemen lain. Contohnya:

.element {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

5 clip-path: polygon(0 0, 0 0, 0 0, 0 0);

Gunakan atribut clip-path untuk memangkas bentuk elemen ke dalam poligon yang tidak kelihatan, yang boleh menyembunyikan unsur tersebut. Ini bermakna elemen itu tidak kelihatan pada halaman dan tidak mempunyai sebarang kesan pada elemen lain. Contohnya:

.element {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

6 z-index: -1;

Gunakan atribut z-index untuk menetapkan susunan susunan elemen kepada nombor negatif Anda boleh meletakkan elemen di belakang elemen lain, dengan itu menyembunyikan elemen. Ini bermakna elemen itu tidak kelihatan pada halaman dan tidak mempunyai sebarang kesan pada elemen lain. Contohnya:

.element {
  z-index: -1;
}

Ringkasan:

Di atas ialah beberapa kaedah CSS biasa untuk menyembunyikan elemen. Mengikut keperluan dan senario yang berbeza, anda boleh memilih kaedah yang sesuai untuk menyembunyikan elemen bagi mencapai keperluan reka bentuk dan reka letak halaman. Sama ada anda ingin menyembunyikan elemen sepenuhnya atau menyembunyikannya tetapi masih menggunakan ruang, anda boleh melakukannya dengan CSS.

Atas ialah kandungan terperinci Apakah cara untuk menyembunyikan elemen dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!