Mari bercakap tentang sifat tersembunyi dalam CSS

CSS ialah bahagian penting dalam reka bentuk tapak web, dan sifat tersembunyi di dalamnya boleh membantu kami menyembunyikan elemen tertentu apabila diperlukan. Artikel ini akan memperkenalkan cara menggunakan sifat tersembunyi dalam CSS dan cara menggunakan sifat ini dalam projek sebenar untuk mencapai pengalaman pengguna yang lebih baik.

1. Atribut tersembunyi dalam CSS

Dalam CSS, terdapat tiga atribut tersembunyi biasa: paparan, keterlihatan dan kelegapan.

1. atribut paparan

Atribut paparan digunakan untuk mengawal mod paparan elemen, termasuk nilai berikut:

• sekat: Paparan elemen Untuk elemen peringkat blok, pemisah baris akan ditambah sebelum dan selepas.
• tiada: Elemen tidak akan dipaparkan dan tidak akan memenuhi ruang pada halaman.
• sebaris: Paparkan elemen sebagai elemen sebaris tanpa menambah pemisah baris sebelum dan selepas.
• blok sebaris: Paparkan elemen sebagai elemen blok sebaris.
• flex: Paparkan elemen sebagai bekas fleksibel.
• grid: Paparkan elemen sebagai bekas grid.

2. atribut keterlihatan

Atribut keterlihatan digunakan untuk mengawal keterlihatan elemen, termasuk nilai berikut:

• boleh dilihat: Unsur boleh dilihat.
• tersembunyi: Elemen tidak kelihatan, tetapi masih mengambil ruang pada halaman.
• runtuh: Elemen diruntuhkan, digunakan untuk baris dan lajur jadual.

3. atribut kelegapan

Atribut kelegapan digunakan untuk mengawal ketelusan elemen, dengan nilai antara 0 (telus sepenuhnya) hingga 1 (sepenuhnya legap).

2. Sembunyikan elemen

1. Gunakan display:none

Apabila anda perlu menyembunyikan elemen, anda boleh menggunakan display:none untuk menyembunyikannya. Contohnya:

#hide-me {
  display: none;
}

Pada masa ini, elemen dengan id hide-me tidak akan dipaparkan dan tidak akan menduduki ruang pada halaman.

2. Gunakan visibility:hidden

Jika anda perlu mengekalkan kedudukan dan saiz elemen pada halaman, tetapi tidak mahu ia kelihatan, anda boleh gunakan visibility:hidden. Contohnya:

#invisible {
  visibility: hidden;
}

Pada masa ini, elemen dengan id halimunan tidak akan dipaparkan, tetapi ia masih akan menduduki ruang pada halaman.

3. Gunakan kelegapan:0

Jika anda perlu membuat elemen telus sepenuhnya tetapi masih mahu menggunakan ruang pada halaman, anda boleh menggunakan kelegapan:0. Contohnya:

#transparent {
  opacity: 0;
}

Pada masa ini, elemen dengan id lutsinar akan menjadi lutsinar sepenuhnya, tetapi ia masih akan menduduki ruang halaman.

3. Menyembunyikan dalam aplikasi praktikal

Menggunakan atribut tersembunyi dalam CSS boleh mencapai pengalaman pengguna yang lebih baik dalam projek sebenar.

1. Menu Digantung

Dalam sesetengah tapak web, menu terapung sering digunakan untuk navigasi atau fungsi lain. Apabila pengguna menuding tetikus pada kawasan tertentu, menu akan dipaparkan di lokasi tersebut. Jika tidak perlu menu terapung, ia perlu disembunyikan. Contohnya:

#menu {
  display: none;
}

#hover-area:hover #menu {
  display: block;
}

Apabila tetikus melayang di atas kawasan dengan kawasan hover id, elemen dengan menu id akan dipaparkan.

2. Kotak modal

Dalam halaman web, kotak modal sering digunakan untuk memaparkan beberapa maklumat segera, iklan pop timbul, dsb. Apabila kotak modal tidak diperlukan, ia perlu disembunyikan. Contohnya:

#modal {
  display: none;
}

.button {
  cursor: pointer;
}

#myModal:target {
  display: block;
}

Dalam kod di atas, apabila butang diklik, sasaran lompatan akan ditetapkan ke kawasan halaman dengan id myModal melalui titik utama, dengan itu memaparkan kotak modal.

3. Reka Bentuk Responsif

Dengan pembangunan berterusan peranti mudah alih, reka bentuk responsif telah menjadi konsep penting dalam pembangunan tapak web moden. Dalam reka bentuk responsif, selalunya perlu menggunakan display:none untuk menyembunyikan elemen tertentu supaya tapak web dipaparkan dengan lebih munasabah pada peranti mudah alih. Contohnya:

@media only screen and (max-width: 480px) {
  #sidebar {
    display: none;
  }
}

Dalam kod di atas, apabila lebar skrin kurang daripada atau sama dengan 480 piksel, elemen dengan id bar sisi akan disembunyikan untuk menyesuaikan diri dengan paparan peranti mudah alih.

Ringkasan

Artikel ini memperkenalkan sifat tersembunyi dalam CSS dan aplikasi praktikalnya. Dalam projek sebenar, atribut tersembunyi sering digunakan untuk melaksanakan fungsi seperti menu terapung, kotak modal dan reka bentuk responsif, yang boleh membantu kami mencapai pengalaman pengguna yang lebih baik. Pada masa yang sama, penjagaan perlu diambil untuk tidak menyalahgunakan apabila menggunakan atribut tersembunyi untuk memastikan tapak web boleh diakses dan boleh digunakan.

Atas ialah kandungan terperinci Mari bercakap tentang sifat tersembunyi dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!