Paparan CSS
Paparan dan Keterlihatan CSS
Atribut paparan menetapkan cara elemen perlu dipaparkan dan atribut keterlihatan menentukan cara elemen perlu dipaparkan Nampak atau tersembunyi.
Sembunyikan elemen - paparan:tiada atau keterlihatan:tersembunyi
Sembunyikan elemen dengan menetapkan atribut paparan kepada "tiada" , atau tetapkan atribut keterlihatan kepada "tersembunyi". Walau bagaimanapun, ambil perhatian bahawa kedua-dua kaedah ini akan menghasilkan hasil yang berbeza.
keterlihatan: tersembunyi boleh menyembunyikan elemen, tetapi elemen tersembunyi masih perlu menduduki ruang yang sama seperti sebelum ia disembunyikan. Dalam erti kata lain, walaupun elemen itu tersembunyi, ia masih mempengaruhi reka letak.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>這是一個(gè)明顯的標(biāo)題</h1>
<h1 class="hidden">這是一個(gè)隱藏標(biāo)題</h1>
<p>注意,隱藏標(biāo)題仍然占用空間.</p>
</body>
</html>Jalankan program dan cuba
paparan:tiada boleh disembunyikan Satu elemen, dan elemen tersembunyi tidak mengambil sebarang ruang. Dalam erti kata lain, bukan sahaja elemen tersembunyi, tetapi ruang yang asalnya diduduki oleh elemen itu juga akan hilang dari susun atur halaman.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>這是一個(gè)明顯的標(biāo)題</h1>
<h1 class="hidden">這是一個(gè)隱藏的標(biāo)題</h1>
<p>注意,display:none 隱藏不占用空間.</p>
</body>
</html>Jalankan program untuk mencubanya
Paparan CSS - Elemen Blok dan Sebaris
Elemen blok ialah elemen yang mengambil keseluruhan lebar dan didahului dan diikuti dengan pemisah baris. Contoh
elemen blok:
<h1>
<p>
<div>
Elemen sebaris hanya memerlukan lebar yang diperlukan dan jangan membalut paksa.
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:
<!DOCTYPE html>
<html>
<head>
<style>
li{display:inline;}
</style>
</head>
<body>
<p>這個(gè)鏈接列表顯示為一個(gè)水平菜單:</p>
<ul>
<li><a href="" target="_blank">HTML</a></li>
<li><a href="" target="_blank">CSS</a></li>
<li><a href="" target="_blank">JavaScript</a></li>
<li><a href="" target="_blank">XML</a></li>
</ul>
</body>
</html>Jalankan atur cara untuk mencubanya
Contoh
Contoh berikut menggunakan elemen span sebagai elemen blok
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>Jalankan atur cara untuk mencubanya
