css tidak kelihatan

CSS bukan sahaja boleh menjadikan halaman web cantik, tetapi juga boleh mencapai banyak kesan interaktif yang menarik. Walau bagaimanapun, dalam CSS, terdapat beberapa gaya yang tidak kelihatan tetapi juga sangat penting. Artikel ini akan meneroka gaya halimunan dalam CSS dan aplikasinya.

1. paparan:tiada

paparan:tiada ialah salah satu gaya halimunan yang paling biasa dalam CSS. Ia membolehkan elemen hilang sepenuhnya tanpa mengambil sebarang ruang. Khususnya, apabila display:none digunakan, elemen tidak akan dipaparkan dan tidak akan menduduki sebarang ruang, jadi tiada kesannya akan kelihatan pada halaman.

Gaya ini sering digunakan untuk mengawal keterlihatan halaman web. Sebagai contoh, terdapat beberapa fungsi dalam halaman web yang perlu dipaparkan dalam keadaan tertentu Dalam kes ini, atribut paparan elemen boleh dikawal melalui JS supaya ia dipaparkan apabila syarat tertentu dipenuhi dan tersembunyi apabila ia berada. bukan.

2. keterlihatan:tersembunyi

keterlihatan:tersembunyi agak serupa dengan paparan:tidak ada. Walau bagaimanapun, perbezaan antara visibility:hidden dan display:none ialah walaupun elemen visibility:hidden tidak kelihatan, ia masih menempati ruang, jadi akan ada elemen yang tidak kelihatan tetapi sedia ada pada halaman yang menduduki kedudukan yang sepadan.

Gaya ini kadangkala digunakan untuk mengawal kesan yang berkaitan dengan animasi CSS. Sebagai contoh, apabila melaksanakan animasi fade-in dan fade-out, untuk melengahkan pemuatan beberapa elemen, anda boleh menggunakan visibility:hidden untuk menyembunyikannya dahulu dan kemudian menukar sifat keterlihatannya kepada boleh dilihat apabila ia perlu dipaparkan, supaya kesan animasi boleh dicapai.

3 Kelegapan:0

Kelegapan:0 ialah satu lagi gaya yang tidak kelihatan. Ia menjadikan elemen telus sepenuhnya dan tidak mengambil ruang, tetapi masih wujud. Tidak seperti display:none dan visibility:hidden, gaya ini menjadikan elemen telus tetapi masih mengekalkan maklumat saiz dan kedudukannya.

Gaya ini sangat biasa apabila melaksanakan beberapa kesan animasi. Contohnya, untuk melaksanakan kesan kelegapan daripada legap kepada telus, anda boleh menetapkan sifat kelegapan elemen kepada 1 dahulu, dan kemudian menukar nilai kelegapannya secara dinamik daripada 1 kepada 0 melalui JS, dengan itu mencapai kesan kelegapan.

4. height:0;width:0

height:0;width:0 ialah gaya yang tidak kelihatan tetapi sangat berguna dalam CSS. Ia boleh mengubah unsur menjadi kewujudan yang tidak kelihatan dan senyap. Berbeza daripada gaya yang diperkenalkan di atas, gaya ini bukan sahaja menjadikan elemen tidak kelihatan, tetapi juga memadamkan sepenuhnya ruang yang diduduki oleh elemen tersebut.

Gaya ini sangat berguna apabila mencapai beberapa kesan tertentu. Sebagai contoh, apabila melaksanakan beberapa penunjuk atau ikon kecil, anda boleh mentakrifkan elemen

yang kosong, dan kemudian menetapkan ketinggian dan lebarnya kepada 0, supaya ia menjadi kotak kecil yang tidak kelihatan Apabila anda perlu memaparkan penunjuk atau ikon , hanya isikan kandungan yang sepadan.

5. position:absolute;top:-9999px;left:-9999px

position:absolute;top:-9999px;left:-9999px Ini ialah gaya halimunan yang paling misteri dalam CSS , yang menyembunyikan sepenuhnya elemen dan tiada kesannya dapat dilihat walaupun dalam kod sumber HTML.

Gaya ini mempunyai banyak senario penggunaan. Contohnya, apabila melaksanakan kotak timbul terapung dalam sesetengah halaman web, anda boleh menggunakan gaya ini untuk menyembunyikan kotak timbul dahulu, dan kemudian memaparkannya apabila pengguna mengklik butang atau mencetuskan acara.

Di atas ialah beberapa gaya halimunan biasa dan aplikasinya dalam CSS. Walaupun gaya ini tidak kelihatan, ia memainkan peranan yang sangat penting dalam pembangunan web dan membawa kami lebih banyak reka bentuk dan fleksibiliti interaksi.

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