Rumah > Artikel > hujung hadapan web > Terokai ciri dan aplikasi HTML menggunakan atribut paparan
Terokai ciri dan aplikasi HTML menggunakan atribut paparan
- WBOYasal
- 2024-02-02 13:33:051140semak imbas
Ciri-ciri dan aplikasi atribut paparan dalam HTML
HTML ialah bahasa penanda yang digunakan untuk mencipta halaman web Atribut paparan ialah salah satu atribut yang biasa digunakan dalam HTML dan digunakan untuk mengawal cara elemen dipaparkan pada muka surat. Atribut paparan mempunyai nilai yang berbeza, setiap nilai mempunyai ciri dan aplikasinya sendiri. Artikel ini akan memperkenalkan beberapa nilai atribut paparan biasa dan memberikan contoh kod yang sepadan.
- paparan: blok
blok ialah nilai lalai atribut paparan, yang bermaksud elemen tersebut akan dipaparkan sebagai elemen peringkat blok. Elemen peringkat blok akan menduduki keseluruhan baris pada halaman, menduduki barisnya sendiri sehingga ia menemui baris baharu. Elemen peringkat blok boleh menetapkan atribut seperti lebar, tinggi, jidar dalaman dan luaran serta boleh memuatkan elemen lain.
Contoh kod:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: block;
width: 200px;
height: 200px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div>This is a block element.</div>
</body>
</html>- paparan: sebaris
sebaris bermaksud elemen akan dipaparkan sebagai elemen sebaris. Elemen sebaris tidak menduduki satu baris dengan sendirinya dan boleh dipaparkan pada baris yang sama dengan elemen lain. Sifat seperti lebar, tinggi, jidar dalam dan luar, dsb. unsur sebaris tidak mempunyai kesan dan boleh memuatkan teks atau unsur sebaris lain.
Contoh kod:
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: inline;
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<span>This is an inline element.</span>
</body>
</html>- paparan: inline-block
inline-block ialah satu lagi nilai biasa atribut paparan, yang bermaksud elemen itu akan dipaparkan sebagai elemen blok sebaris. Elemen blok sebaris boleh dipaparkan pada baris yang sama, dan atribut seperti lebar, ketinggian serta jidar dalam dan luar boleh ditetapkan.
Contoh kod:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
}
</style>
</head>
<body>
<div>This is an inline-block element.</div>
<div>This is another inline-block element.</div>
</body>
</html>- paparan: tiada
tiada bermakna elemen tidak akan dipaparkan dan elemen itu tidak menduduki sebarang ruang pada halaman. Gunakan paparan: tiada untuk menyembunyikan elemen, yang setara dengan mengalih keluar elemen daripada halaman.
Contoh kod:
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
}
</style>
</head>
<body>
<p>This paragraph will not be displayed.</p>
</body>
</html>Di atas ialah beberapa nilai biasa bagi atribut paparan dan contoh kod yang sepadan. Dengan menggunakan atribut paparan secara fleksibel, kami boleh mengawal cara elemen dipaparkan pada halaman dan mencapai kesan reka letak yang berbeza.
Atas ialah kandungan terperinci Terokai ciri dan aplikasi HTML menggunakan atribut paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!