The visibilityharta di CSS mempunyai dua fungsi yang berbeza. Ini menyembunyikan baris dan lajur meja, dan juga menyembunyikan elemen tanpa mengubah susun atur.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilitymempunyai empat nilai yang sah: visible, hidden, collapse, dan inherit. Kami akan melalui masing-masing untuk mengetahui lebih lanjut.
kelihatan
Sama seperti kedengarannya, visiblemembuat semua perkara kelihatan. Tidak ada yang tersembunyi secara lalai, jadi nilai ini tidak berfungsi kecuali anda telah menetapkannya hiddenatau induk elemen ini.
tersembunyi
Yang hidden nilai menyembunyikan sesuatu. Ini berbeza daripada menggunakan display: none, kerana hidden hanya menyembunyikan elemen secara visual. Elemen itu masih ada, dan masih memerlukan ruang di halaman, tetapi anda tidak dapat melihatnya lagi (seperti mengubah kelegapan menjadi 0). Menariknya, harta ini tidak diwarisi secara lalai. Ini bermaksud, tidak seperti sifat display atau opacitysifat, anda boleh membuat elemen hidden, dan masih mempunyai salah satu anaknya visible, seperti ini:
Perhatikan bahawa, sementara disembunyikan, elemen induk tidak mencetuskan :hover.
runtuh
Yang satu ini hanya mempengaruhi baris jadual ( ), kumpulan baris (seperti ), lajur ( ), kumpulan lajur ( ), atau elemen yang dibuat sedemikian rupa display).
Tidak seperti hidden, nilai ini menyembunyikan sub-elemen jadual, tanpa meninggalkan ruang di mana ia berada. Sekiranya digunakan di mana sahaja tetapi pada sub-elemen meja, ia berfungsi seperti itu visibility: hidden.
Terdapat banyak kebiasaan dengan ini, sukar untuk mengetahui di mana hendak bermula. Sama seperti pembuka selera:
- Chrome / Safari akan runtuh berturut-turut, tetapi ruang yang didudukinya akan tetap ada. Dan jika sel meja di dalamnya mempunyai batas, itu akan runtuh menjadi satu sempadan di sepanjang tepi atas.
- Chrome / Safari tidak akan meruntuhkan lajur atau kumpulan lajur.
- Safari meruntuhkan sel meja (salah) tetapi Chrome tidak akan (betul).
- Di mana-mana penyemak imbas, jika sel berada dalam lajur yang runtuh (sama ada sebenarnya runtuh atau tidak) teks dalam sel itu tidak akan dipaparkan.
- Opera (pra WebKit) akan meruntuhkan semua perkara, kecuali sel meja (yang betul).
Terdapat banyak lagi, tetapi pada dasarnya: jangan gunakan ini.
mewarisi
Nilai lalai. Ini hanya menyebabkan elemen mewarisi nilai induknya.
Kotak Flex
visibility: collapse; digunakan dalam Flexbox juga, dan lebih jelas.
Sokongan Penyemak Imbas
Asasnya, tidak mempertimbangkan semua kebiasaan dengan keruntuhan:
| Sebarang | Sebarang | Sebarang | 4+ | 4+ | Sebarang | Sebarang |
IE 7- tidak menyokong collapseatau inherit.