Paparan dan Keterlihatan CSS
Dalam proses pembangunan biasa, kami sentiasa menghadapi beberapa teks yang dipaparkan atau disembunyikan dalam senario tertentu untuk mencapai kesan yang kami inginkan Kedua-dua paparan dan sintaks keterlihatan dalam CSS boleh menyembunyikan dan memaparkan elemen html. Mereka mungkin kelihatan sama, tetapi mereka masih mempunyai perbezaan tertentu.
takrifan paparan dan penggunaan
Atribut paparan menentukan jenis kotak yang perlu dijana oleh elemen.
Penerangan
Atribut ini digunakan untuk menentukan jenis kotak paparan yang dijana oleh elemen semasa membuat reka letak. Untuk jenis dokumen seperti HTML, menggunakan paparan secara sembarangan boleh berbahaya, kerana ia mungkin melanggar hierarki paparan yang telah ditakrifkan dalam HTML. Untuk XML, memandangkan XML tidak mempunyai hierarki jenis ini terbina dalam, semua paparan amat diperlukan.
Nilai yang mungkin
Nilai tiada Unsur ini tidak akan dipaparkan.
blok Elemen ini akan dipaparkan sebagai elemen peringkat blok, dengan pemisah baris sebelum dan selepas elemen ini.
Lalai sebaris. Elemen ini akan dipaparkan sebagai elemen sebaris tanpa pemisah baris sebelum atau selepas elemen.
elemen blok sebaris-blok. (Nilai baharu dalam CSS2.1)
item senarai Elemen ini akan dipaparkan sebagai senarai.
run-in Elemen ini akan dipaparkan sebagai elemen peringkat blok atau elemen sebaris bergantung pada konteks.
padat Terdapat nilai padat dalam CSS, tetapi ia telah dialih keluar daripada CSS2.1 kerana kekurangan sokongan yang meluas.
penanda Terdapat penanda nilai dalam CSS, tetapi ia telah dialih keluar daripada CSS2.1 kerana kekurangan sokongan yang meluas.
jadual Elemen ini akan dipaparkan sebagai jadual peringkat blok (serupa dengan <jadual>), dengan pemisah baris sebelum dan selepas jadual.
jadual sebaris Elemen ini akan dipaparkan sebagai jadual sebaris (serupa dengan <jadual>), tanpa pemisah baris sebelum dan selepas jadual.
kumpulan baris jadual Elemen ini akan dipaparkan sebagai kumpulan satu atau lebih baris (serupa dengan <tbody>).
kumpulan pengepala jadual Elemen ini akan dipaparkan sebagai kumpulan satu atau lebih baris (serupa dengan <thead>).
kumpulan pengaki meja Elemen ini akan dipaparkan sebagai kumpulan satu atau lebih baris (serupa dengan <tfoot>).
baris jadual Elemen ini akan dipaparkan sebagai baris jadual (serupa dengan <tr>).
kumpulan lajur jadual Elemen ini akan dipaparkan sebagai kumpulan satu atau lebih lajur (serupa dengan <colgroup>).
lajur jadual Elemen ini akan dipaparkan sebagai lajur sel (serupa dengan <col>)
sel jadual Elemen ini akan dipaparkan sebagai sel jadual (serupa dengan <td> ; dan <th>)
table-caption Elemen ini akan dipaparkan sebagai tajuk jadual (serupa dengan <caption>)
warisan menentukan bahawa nilai atribut paparan harus diwarisi daripada unsur induk.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>
</html>takrif kebolehlihatan dan penggunaan
Atribut keterlihatan menentukan sama ada elemen nampak.
Petua: Malah unsur halimunan mengambil ruang pada halaman. Gunakan atribut "paparan" untuk mencipta unsur halimunan yang tidak menggunakan ruang halaman.
Penerangan
Atribut ini menentukan sama ada untuk memaparkan kotak elemen yang dijana oleh elemen. Ini bermakna elemen itu masih menduduki ruang asalnya, tetapi boleh menjadi tidak kelihatan sepenuhnya. Keruntuhan nilai digunakan dalam jadual untuk mengalih keluar lajur atau baris daripada reka letak jadual.
Nilai yang mungkin
Nilai Penerangan
<🎜 🎜>nilai Lalai yang kelihatan. Unsur itu kelihatan.
elemen tersembunyi tidak kelihatan.
runtuh Apabila digunakan dalam elemen jadual, nilai ini boleh memadamkan baris atau lajur, tetapi ia tidak akan menjejaskan reka letak jadual. Ruang yang diduduki oleh baris atau lajur disediakan untuk kandungan lain. Jika nilai ini digunakan pada elemen lain, nilai ini akan dipaparkan sebagai "tersembunyi".
warisan menyatakan bahawa nilai atribut keterlihatan harus diwarisi daripada elemen induk.
Contoh: Paparan CSS - Elemen Blok dan Sebaris Elemen blok ialah elemen yang mengambil lebar penuh dan didahului dan diikuti dengan pemisah baris. Contoh elemen blok: <h1> <p> <div> elemen sebaris Sahaja lebar yang diperlukan diperlukan, tiada garis putus yang dipaksakan. Contoh elemen sebaris: <span> <a> Cara menukar paparan elemen Anda boleh menukar elemen sebaris dan elemen sekat dan sebaliknya untuk menjadikan halaman kelihatan disatukan dengan cara tertentu dan masih mematuhi piawaian web. Contoh berikut memaparkan item senarai sebagai elemen sebaris: li {display:inline;} Contoh berikut menggunakan elemen span sebagai elemen blok: span {display:block;} Nota: Tukar jenis paparan elemen untuk melihat cara elemen dipaparkan dan jenis elemennya. Contohnya: elemen sebaris yang ditetapkan kepada paparan:blok tidak dibenarkan mempunyai elemen blok bersarang di dalamnya. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.visibilityHidden { visibility: hidden; }
.visibilityVisible { visibility: visible; }
</style>
<body>
<!-- 注意第一个图片虽然隐藏了，但是位置还是被占据的 -->
<p>
<a href="#" class="visibilityHidden">
<img src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
<p>
<a href="#" class="visibilityHidden">
<img class="visibilityVisible" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
</body>
</html>
