Bagaimana untuk menyembunyikan elemen menggunakan CSS

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mereka bentuk halaman web dan elemen gaya. Satu ciri yang disertakan ialah menyembunyikan elemen, yang menyembunyikan elemen daripada reka letak web tetapi masih mengekalkan kedudukan dan saiz elemen. Dalam artikel ini, kita akan membincangkan cara menyembunyikan elemen menggunakan CSS.

1. paparan:tiada

Gunakan atribut display:none untuk menyembunyikan sepenuhnya elemen dan mengalih keluarnya daripada reka letak. Walaupun elemen itu mengambil ruang, ia tidak akan dipaparkan. Kaedah ini sesuai apabila anda perlu menyembunyikan beberapa kandungan supaya ia boleh dipaparkan dengan segera dalam keadaan tertentu. Ia boleh digunakan pada mana-mana elemen termasuk div, perenggan, imej, senarai, dsb.

Sebagai contoh, kami ingin menyembunyikan elemen div dan menunjukkannya apabila diperlukan:

HTML:

<div>这是要隐藏的元素。</div>

CSS:

.hide-me {
  display: none;
}

Dalam Dalam kod CSS di atas, .hide-me ialah nama kelas dan semua elemen yang menggunakan kelas ini akan disembunyikan.

2. keterlihatan:tersembunyi

Atribut keterlihatan boleh menyembunyikan elemen, tetapi elemen itu masih mengekalkan ruang dan kedudukannya serta boleh bertindih dengan elemen lain. Kaedah ini sesuai untuk situasi di mana anda perlu mengekalkan ruang dan kedudukan sesuatu elemen semasa ia tersembunyi. Ia boleh digunakan pada mana-mana elemen termasuk div, perenggan, imej, senarai, dll.

Contohnya, kami ingin menyembunyikan elemen div dan menunjukkannya apabila diperlukan:

HTML:

<div>这是要隐藏的元素。</div>

CSS:

.hide-me {
  visibility: hidden;
}

Dalam Dalam kod CSS di atas, .hide-me ialah nama kelas dan semua elemen yang menggunakan kelas ini akan disembunyikan.

3. kelegapan:0

Sifat kelegapan menjadikan elemen telus sepenuhnya tetapi mengekalkan ruang dan kedudukannya serta boleh bertindih dengan elemen lain. Kaedah ini sesuai untuk situasi di mana anda perlu menyembunyikan elemen buat sementara waktu dan menunjukkannya dengan segera apabila diperlukan.

Contohnya, kami ingin menyembunyikan elemen div dan menunjukkannya apabila diperlukan:

HTML:

<div>这是要隐藏的元素。</div>

CSS:

.hide-me {
  opacity: 0;
}

Dalam Dalam kod CSS di atas, .hide-me ialah nama kelas dan semua elemen yang menggunakan kelas ini akan menjadi telus dan tidak kelihatan.

4. tinggi:0; lebar:0

Jika anda ingin menyembunyikan imej, anda boleh menggunakan atribut height:0; saiz. Kaedah ini sering digunakan untuk menyembunyikan ikon atau butang kecil, dan bukannya menyembunyikan keseluruhan elemen. Contohnya, jika anda ingin menyembunyikan imej:

HTML:

<img  class="hide-me lazy" src="/static/imghwm/default1.png" data-src="example.jpg" alt="Bagaimana untuk menyembunyikan elemen menggunakan CSS" >

CSS:

.hide-me {
  height: 0;
  width: 0;
}

Dalam kod CSS di atas, .hide-me ialah nama kelas, Imej yang menggunakan kelas ini tidak akan kelihatan.

Ringkasan:

Apabila menggunakan CSS untuk menyembunyikan elemen, anda boleh memilih kaedah yang berbeza mengikut keperluan anda. Jika anda ingin menyembunyikan sepenuhnya elemen dan memberi ruang untuknya, gunakan paparan: tiada; jika anda perlu menyembunyikan elemen tetapi mengekalkan ruangnya, gunakan keterlihatan: tersembunyi jika anda ingin menunjukkan elemen dengan segera apabila diperlukan, gunakan kelegapan: 0 dan tinggi: 0; lebar: 0 atribut. Tidak kira kaedah yang anda pilih, anda boleh menyembunyikan elemen yang tidak diingini daripada reka letak anda dan memaparkannya dengan segera apabila anda memerlukannya.

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