css sembunyikan dan tunjukkan

Dalam reka bentuk web, menyembunyikan dan menunjukkan elemen adalah keperluan yang sangat biasa. Untuk menyembunyikan dan menunjukkan elemen, kami biasanya menggunakan sifat paparan CSS. Artikel ini akan memperkenalkan kaedah menyembunyikan dan menunjukkan yang biasa digunakan dalam CSS.

1. Atribut paparan dalam CSS

Atribut paparan ialah salah satu atribut yang paling biasa digunakan dalam CSS. Ia boleh mengawal paparan atau penyembunyian elemen, dan juga boleh menukar ekspresi elemen . Atribut paparan mempunyai banyak nilai Di sini kami hanya memperkenalkan beberapa nilai yang biasa digunakan.

1. paparan: tiada

paparan:tiada ialah kaedah yang paling biasa digunakan untuk menyembunyikan elemen, ia mengalih keluar elemen sepenuhnya daripada aliran dokumen dan tidak menduduki sebarang ruang. Walaupun anda melihat kod HTML elemen dalam penyemak imbas, anda tidak akan dapat melihat elemen tersembunyi. Kelebihan menggunakan display:none ialah elemen boleh disembunyikan tanpa mengubah reka letak dan elemen itu tidak mengambil ruang.

Sebagai contoh, kita boleh menggunakan kod CSS berikut untuk menyembunyikan elemen:

div {
  display: none;
}

2. paparan: blok

paparan:sekat paling biasa digunakan untuk memaparkan kaedah elemen. Elemen blok bermula pada baris baharu dan mengambil keseluruhan lebar elemen induk. Ia boleh menetapkan lebar dan tinggi serta boleh memuatkan elemen sebaris dan nod teks secara lalai.

Sebagai contoh, kod CSS berikut menetapkan elemen div kepada elemen blok:

div {
  display: block;
}

3. paparan: sebaris

paparan:sebaris menjadikan elemen paparan sebaris , muncul sebagai elemen bersebelahan. Ia tidak memulakan baris baharu sebelum atau selepas teks, tetapi berkongsi baris dengan elemen lain. Ia menetapkan lebar dan ketinggian elemen, tetapi tidak membalutnya secara automatik.

Sebagai contoh, kita boleh menetapkan elemen span kepada elemen sebaris menggunakan kod CSS berikut:

span {
  display: inline;
}

4. paparan: blok sebaris

paparan :inline- Block membolehkan elemen mempunyai beberapa ciri sebaris (elemen tidak akan memulakan baris baru) dan beberapa ciri blok (lebar dan ketinggian boleh ditetapkan Ia sering digunakan untuk mencapai beberapa kesan susun atur, seperti kesan grafik dan teks bercampur.

Sebagai contoh, kita boleh menggunakan kod CSS berikut untuk menetapkan elemen div kepada elemen blok sebaris:

div {
  display: inline-block;
}

2 Atribut keterlihatan dalam CSS

Selain itu kepada atribut paparan, terdapat juga Terdapat atribut yang biasa digunakan yang boleh digunakan untuk menunjukkan dan menyembunyikan elemen, dan itu ialah atribut keterlihatan. Atribut keterlihatan digunakan untuk mengawal keterlihatan elemen dan boleh ditetapkan kepada dua nilai: boleh dilihat (nilai lalai, elemen kelihatan) dan tersembunyi (elemen disembunyikan).

1. keterlihatan: boleh dilihat

keterlihatan: boleh dilihat ialah nilai lalai, iaitu nilai yang menjadikan elemen kelihatan. Ini sangat serupa dengan kes display:block atau display:inline. Walau bagaimanapun, elemen dengan keterlihatan: boleh dilihat mengekalkan kedudukannya dalam dokumen dan tidak dipengaruhi oleh reka letak CSS seperti elemen dengan display:block atau display:inline. Walaupun elemen disembunyikan, anda masih boleh menggunakan JavaScript atau teknik lain untuk mendapatkan kedudukan dan saiz elemen.

Sebagai contoh, kod CSS berikut menetapkan elemen div kepada keadaan kelihatan:

div {
  visibility: visible;
}

2. keterlihatan: tersembunyi

keterlihatan: tersembunyi ialah pilihan untuk menyembunyikan nilai elemen. Ini mempunyai kesan yang sama seperti display:none, tetapi bukannya mengalih keluar elemen daripada aliran dokumen, ia mengekalkan ruang elemen. Oleh itu, jika sesuatu elemen disembunyikan, elemen lain akan mengambil kedudukannya, dan peristiwa serta animasi yang dicetuskan oleh elemen itu akan tetap berfungsi.

Sebagai contoh, kod CSS berikut menetapkan elemen div kepada keadaan tidak kelihatan:

div {
  visibility: hidden;
}

3 Atribut kelegapan dalam CSS

Selain menggunakan paparan dan keterlihatan atribut untuk menyembunyikan dan menyembunyikan elemen Selain paparan, anda juga boleh menggunakan atribut kelegapan untuk melaraskan ketelusan sesuatu elemen.

1. kelegapan: 1 (kelegapan)

kelegapan: 1 ialah nilai lalai unsur, yang bermaksud unsur itu adalah legap sepenuhnya, iaitu tiada apa yang boleh dilihat melalui unsur Kandungan berikut.

Sebagai contoh, kod CSS berikut menetapkan elemen div legap:

div {
  opacity: 1;
}

2. kelegapan: 0 (telus sepenuhnya)

kelegapan: 0 bermaksud elemen Telus sepenuhnya, yang bermaksud bahawa latar belakang ditunjukkan sepenuhnya melalui elemen. Dalam amalan, kelegapan: 0 sering digunakan untuk menyembunyikan elemen dan mengekalkan jejak elemen.

Sebagai contoh, kod CSS berikut menetapkan elemen div telus sepenuhnya:

div {
  opacity: 0;
}

3. kelegapan: 0.5 (separuh telus)

kelegapan: 0.5 bermakna Elemen adalah lut sinar, yang bermaksud bahawa latar belakang boleh ditunjukkan melalui elemen, tetapi kandungan elemen masih boleh dilihat.

Sebagai contoh, kod CSS berikut menetapkan elemen div lut sinar:

div {
  opacity: 0.5;
}

Ringkasan

Artikel ini memperkenalkan kaedah menyembunyikan dan menunjukkan yang biasa digunakan dalam CSS, termasuk paparan dan keterlihatan sifat, dan sifat kelegapan. Dalam pembangunan sebenar, kita boleh memilih kaedah yang berbeza untuk menyembunyikan dan memaparkan elemen mengikut keperluan tertentu. Semoga artikel ini dapat membantu anda.

Atas ialah kandungan terperinci css sembunyikan dan tunjukkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!