Nilai atribut paparan CSS yang biasa digunakan dan senario aplikasinya

Untuk menguasai nilai biasa atribut paparan CSS dan senario aplikasinya, contoh kod khusus diperlukan

CSS (Cascading Style Sheets) ialah bahasa penanda yang digunakan untuk menerangkan gaya dokumen HTML, daripada yang mana atribut paparan adalah satu sifat yang sangat penting. Atribut paparan boleh digunakan untuk menentukan tingkah laku paparan elemen dan menentukan cara elemen dibentangkan pada halaman, jenis model kotak, dsb.

Dalam CSS, atribut paparan mempunyai berbilang nilai sepunya dan setiap nilai sepadan dengan gelagat paparan elemen dan senario aplikasi yang berbeza.

1. display:none

display:none ialah salah satu nilai atribut paparan yang paling biasa Ia digunakan untuk menyembunyikan elemen dan elemen itu tidak lagi akan menduduki ruang reka letak halaman. Apabila elemen ditetapkan untuk memaparkan: tiada, ia tidak akan dipaparkan pada halaman sama sekali.

Berikut ialah kod contoh yang menggunakan paparan:tiada untuk menyembunyikan elemen:

<div style="display:none;">
  这是一个被隐藏的元素
</div>

2. paparan:sekat

paparan:sekat ialah nilai lalai atribut paparan. Apabila atribut paparan elemen ditetapkan untuk menyekat, elemen itu akan dipaparkan sebagai elemen peringkat blok, yang akan menduduki barisnya sendiri dan mempunyai lebar lalai 100% daripada lebar elemen induknya.

Berikut ialah contoh kod yang menggunakan display:block untuk susun atur elemen:

<div style="display:block; width:200px; height:200px; background-color:red;">
  这是一个块级元素
</div>

3. display:inline

display:inline digunakan untuk menjadikan elemen sebagai elemen sebaris supaya ia boleh dipaparkan bersama elemen sebaris yang lain , dan lebar dan Ketinggian hanya boleh ditentukan oleh kandungan.

Berikut ialah kod contoh yang menggunakan paparan:sebaris kepada elemen susun atur:

<span style="display:inline; background-color:green;">
  这是一个行内元素
</span>

4. paparan:sebaris-blok

paparan:sebaris-blok boleh menjadikan elemen sebagai elemen peringkat blok sebaris, yang boleh dipaparkan bersama elemen sebaris lain , dan boleh menetapkan sifat seperti lebar, tinggi, jidar, dsb.

Berikut ialah kod sampel yang menggunakan paparan:elemen susun atur blok sebaris:

<div style="display:inline-block; width:100px; height:100px; background-color:blue;"></div>
<div style="display:inline-block; width:100px; height:100px; background-color:yellow;"></div>

5. paparan:flex

display:flex digunakan untuk mencipta model kotak fleksibel dan boleh mengawal susun atur elemen kanak-kanak dengan menetapkan berbeza susun atur atribut, pengisihan, dsb.

Berikut ialah contoh kod menggunakan paparan:lentur reka letak:

<div style="display:flex; justify-content:center; align-items:center; height:200px; background-color:purple;">
  <div style="width:100px; height:100px; background-color:pink;"></div>
</div>

Di atas ialah contoh kod beberapa nilai biasa ciri paparan CSS dan senario aplikasinya. Menguasai nilai lazim dan senario aplikasi ini boleh menggunakan CSS dengan lebih baik untuk melaksanakan reka letak dan reka bentuk halaman.

Atas ialah kandungan terperinci Nilai atribut paparan CSS yang biasa digunakan dan senario aplikasinya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!