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中文网(php.cn)</title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意,隐藏标题仍然占用空间.</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中文网(php.cn)</title>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏的标题</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>这个链接列表显示为一个水平菜单:</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中文网(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
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
