css untuk melaksanakan penyembunyian

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mengawal gaya dan reka letak halaman web. Apabila membina halaman web, kita selalunya perlu menggunakan CSS untuk menentukan gaya elemen, seperti fon, warna latar belakang, sempadan, dsb. Terdapat juga atribut ajaib dalam CSS - paparan, yang boleh mengawal mod paparan elemen, termasuk bersembunyi.

Mengapa anda perlu menyembunyikan elemen? Terdapat banyak adegan. Contohnya, apabila membuat halaman dengan berbilang tab, kami mungkin hanya mahu memaparkan kandungan tab yang sedang dipilih dan menyembunyikan kandungan tab lain dahulu. Untuk contoh lain, kita mungkin perlu menambah butang tutup pada halaman, yang boleh menyembunyikan elemen apabila diklik, dsb.

Seterusnya, kami akan memperkenalkan secara terperinci beberapa kaedah menyembunyikan elemen dalam CSS.

1. Atribut paparan

paparan ialah atribut yang paling biasa digunakan dalam CSS untuk mengawal mod paparan elemen. Secara lalai, semua elemen dipaparkan. Jika anda ingin menyembunyikan elemen, anda boleh melakukannya dengan mengubah suai atribut paparan. Berikut ialah beberapa nilai untuk atribut paparan:

1. tiada

Sembunyikan elemen dan alih keluarnya daripada aliran dokumen, iaitu, ia tidak mengambil alih angkasa lepas. Ini bermakna elemen tersembunyi tidak lagi memberi kesan pada reka letak halaman.

Kod sampel:

.hide {
  display: none;
}

2. sekat

Tukar elemen kepada elemen peringkat blok dan paparkannya. Elemen peringkat blok menduduki barisnya sendiri, mempunyai lebar dan ketinggian yang ditetapkan, dan boleh memuatkan elemen peringkat blok dan elemen sebaris yang lain.

Kod contoh:

.show {
  display: block;
}

3. sebaris

Tukar elemen kepada elemen sebaris dan paparkannya. Elemen sebaris tidak menduduki satu baris Lebar dan ketinggian ditentukan oleh kandungan dan hanya boleh memuatkan elemen sebaris yang lain.

Kod contoh:

.show {
  display: inline;
}

4. blok sebaris

Tukar elemen kepada elemen peringkat blok sebaris dan paparkannya. Elemen peringkat blok sebaris mempunyai ciri-ciri yang elemen peringkat blok boleh menetapkan lebar dan tinggi, dan elemen sebaris boleh menampung elemen sebaris yang lain.

Kod sampel:

.show {
  display: inline-block;
}

2. Atribut keterlihatan

Atribut keterlihatan juga boleh digunakan untuk mengawal mod paparan elemen. Berbeza daripada paparan, selepas menggunakan keterlihatan untuk menyembunyikan elemen, elemen itu masih mengambil ruang, tetapi tidak lagi dipaparkan. Berikut ialah beberapa nilai untuk atribut keterlihatan:

1. kelihatan

Elemen boleh dilihat dan dipaparkan mengikut kaedah kedudukan. Elemen

2. tersembunyi

tidak kelihatan, tetapi masih mengambil ruang. Tidak seperti paparan: tiada, lebar dan ketinggian elemen masih sah.

3. runtuh

Untuk elemen jadual, sempadan dan padding elemen akan diabaikan, menjadikan baris jadual kelihatan seperti tiada jadual.

Kod sampel:

.hide {
  visibility: hidden;
}

3 Atribut Opacity

Atribut kelegapan boleh mencapai kesan elemen yang hilang secara beransur-ansur. Nilai adalah antara 0 dan 1, menunjukkan ketelusan elemen.

1. 0

Telus sepenuhnya, iaitu unsur tidak kelihatan.

2. 1

Legap sepenuhnya, iaitu unsur kelihatan sepenuhnya.

3. 0.5

Lut, iaitu, unsur itu sebahagiannya kelihatan dan sebahagiannya tidak kelihatan.

Apabila ketelusan ialah 0, elemen itu bukan sahaja tidak kelihatan, tetapi juga tidak menduduki sebarang ruang. Tetapi berhati-hati apabila menggunakan kelegapan untuk menyembunyikan elemen Walaupun ia kelihatan tersembunyi, elemen itu sebenarnya masih ada. Jika anda mahu elemen tidak menempati ruang dan tersembunyi, anda perlu menggabungkannya dengan kaedah lain seperti display:none atau visibility:hidden.

Kod sampel:

.hide {
  opacity: 0;
}

Melalui tiga kaedah di atas, elemen boleh disembunyikan untuk mencapai keperluan reka bentuk yang diperibadikan. Perlu diingatkan bahawa untuk elemen yang boleh dimuat turun, seperti imej, adalah tidak selamat untuk melindungi hak harta intelek melalui penyembunyian, dan teknologi lain harus digunakan untuk mencapai perlindungan.

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