Apakah harta penglihatan dalam CSS? Bagaimanakah ia berbeza dari paparan: Tiada?

Apakah harta penglihatan dalam CSS? Bagaimanakah ia berbeza dari paparan: Tiada?

Harta visibility dalam CSS digunakan untuk mengawal sama ada elemen dapat dilihat di laman web. Ia mempunyai beberapa nilai yang mungkin, termasuk visible , hidden , collapse , dan inherit . Apabila visibility elemen ditetapkan untuk hidden , elemen itu tidak dapat dilihat oleh pengguna tetapi masih menduduki ruang dalam susun atur halaman. Ini bermakna unsur -unsur lain tidak akan bergerak untuk mengisi ruang di mana elemen tersembunyi terletak.

Sebaliknya, display: none yang menghilangkan elemen dari susun atur sepenuhnya. Apabila elemen ditetapkan untuk display: none , ia tersembunyi sepenuhnya dan tidak menduduki mana -mana ruang dalam susun atur. Unsur -unsur lain di halaman akan beralih untuk mengisi ruang yang elemen yang dikeluarkan sebelum ini diduduki. Perbezaan asas ini bagaimana visibility: hidden dan display: none yang mempengaruhi susun atur adalah penting untuk menentukan yang digunakan dalam senario yang berbeza.

Apakah kesan yang menetapkan penglihatan untuk 'tersembunyi' pada susun atur elemen?

Apabila anda menetapkan visibility elemen untuk hidden , ia tidak akan dapat dilihat oleh pengguna, tetapi ia masih akan menjejaskan susun atur halaman. Ruang yang unsur menduduki dalam susun atur masih dikhaskan. Ini bermaksud:

• Unsur ini mengekalkan dimensi (lebar, ketinggian, margin, dan lain -lain) dan terus mempengaruhi kedudukan unsur -unsur lain di sekelilingnya.
• Jika elemen tersembunyi adalah elemen peringkat blok, ia masih akan mewujudkan garis baru dalam susun atur.
• Mana -mana elemen kanak -kanak elemen tersembunyi juga akan tersembunyi, tetapi mereka juga masih akan menduduki ruang masing -masing dalam susun atur.

Sebagai contoh, jika anda mempunyai perenggan teks dan imej bersebelahan, dan anda menetapkan penglihatan imej untuk hidden , perenggan tidak akan beralih ke kiri untuk menduduki ruang yang diambil oleh imej. Susun atur akan kekal tidak berubah secara visual, kecuali untuk ketiadaan imej.

Bagaimanakah anda dapat mengasingkan penglihatan elemen menggunakan animasi CSS?

Untuk bertukar -tukar penglihatan elemen menggunakan animasi CSS, anda boleh menggunakan harta animation bersama -sama dengan kerangka utama untuk peralihan antara visibility: hidden dan visibility: visible . Berikut adalah pendekatan langkah demi langkah:

1. Tentukan kerangka utama:
   Anda perlu membuat kerangka utama yang menentukan bagaimana penglihatan unsur berubah dari semasa ke semasa. Anda juga boleh menghidupkan sifat -sifat lain seperti opacity untuk peralihan yang lebih lancar.

    <code class="css">@keyframes fadeInOut { 0%, 100% { visibility: hidden; opacity: 0; } 50% { visibility: visible; opacity: 1; } }</code>

2. Sapukan animasi:
   Sapukan animasi ke elemen yang anda mahu beralih. Anda boleh mengawal tempoh dan fungsi masa lain yang diperlukan.

    <code class="css">.toggle-visibility { animation: fadeInOut 2s infinite; }</code>

Dalam contoh ini, animasi fadeInOut akan menjadikan elemen memudar masuk dan keluar setiap 2 saat, menukarkan penglihatannya. Anda boleh menyesuaikan masa, kiraan lelaran, dan sifat lain untuk memenuhi keperluan khusus anda.

Dalam senario apa yang akan anda pilih untuk menggunakan 'penglihatan: tersembunyi' lebih 'paparan: tiada'?

Memilih antara visibility: hidden dan display: none bergantung pada keperluan khusus anda untuk bagaimana susun atur harus berkelakuan. Berikut adalah beberapa senario di mana visibility: hidden mungkin lebih disukai daripada display: none :

• Memelihara susun atur: Jika anda perlu menyembunyikan elemen tetapi ingin mengekalkan susun atur seolah -olah elemen masih ada, gunakan visibility: hidden . Ini berguna untuk mewujudkan ruang letak atau mengekalkan struktur yang konsisten di halaman, terutamanya dalam reka bentuk responsif.
• Peningkatan Progresif: Dalam kes -kes di mana anda melaksanakan peningkatan progresif, anda mungkin bermula dengan kandungan yang tersembunyi dan kemudian diturunkan dengan animasi JavaScript atau CSS. Menggunakan visibility: hidden membolehkan kandungannya pada mulanya tersembunyi tetapi masih boleh diakses dan susun atur.
• Kebimbangan Kebolehcapaian: Jika anda ingin menyembunyikan kandungan tetapi masih membenarkannya diakses oleh pembaca skrin (untuk tujuan kebolehaksesan), visibility: hidden boleh bermanfaat. Kandungannya tersembunyi secara visual tetapi masih sebahagian daripada aliran dokumen dan boleh dibaca oleh teknologi bantuan.
• Pertimbangan Prestasi: Dalam senario di mana bertukar -tukar penglihatan dengan kerap, menggunakan visibility: hidden boleh menjadi lebih berprestasi kerana ia tidak memerlukan penyemak imbas untuk mengira semula susun atur setiap kali perubahan penglihatan, tidak seperti display: none .

Ringkasnya, visibility: hidden adalah lebih baik apabila anda perlu menyembunyikan elemen sambil mengekalkan pengaruhnya pada susun atur halaman yang utuh, sedangkan display: none yang harus digunakan apabila anda ingin mengeluarkan elemen dari susun atur sepenuhnya.

Atas ialah kandungan terperinci Apakah harta penglihatan dalam CSS? Bagaimanakah ia berbeza dari paparan: Tiada?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!