Cara menggunakan paparan dalam css

Atribut paparan digunakan untuk menentukan tingkah laku reka letak elemen Terdapat berbilang nilai untuk dipilih, termasuk blok, sebaris, blok sebaris, tiada, lentur dan grid. Menggunakan sifat paparan, anda boleh menetapkan paparan elemen sebagai elemen blok, elemen sebaris atau pemformatan lain dengan menentukan nilai dalam helaian gaya CSS. Sebagai contoh, paparan: blok memaparkan elemen sebagai elemen peringkat blok.

Penggunaan paparan dalam CSS

Apakah atribut paparan? Atribut

display digunakan untuk menentukan gelagat reka letak elemen pada halaman Ia menentukan cara elemen dipaparkan sebagai elemen blok, elemen sebaris atau format lain. Nilai

paparan Sifat paparan

menerima nilai berikut:

• blok - Elemen dipaparkan sebagai elemen peringkat blok, mengambil keseluruhan lebar yang tersedia dan bermula pada baris baharu.
• sebaris - Elemen dipaparkan sebagai elemen sebaris dan tidak membalut apabila ia berada pada baris yang sama dengan elemen lain.
• inline-block - Menggabungkan ciri blok dan sebaris, membenarkan elemen mengambil lebar tetapi masih dipaparkan dengan elemen lain dalam baris yang sama.
• none - Unsur tidak dipaparkan pada halaman.
• flex - Jadikan elemen sebagai bekas untuk susun atur flexbox.
• grid - Menjadikan elemen sebagai bekas untuk susun atur grid.

Bagaimana untuk menggunakan atribut paparan?

Gunakan atribut paparan dalam lembaran gaya CSS dengan sintaks berikut:

<code class="css">selector {
  display: value;
}</code>

Contohnya:

<code class="css">p {
  display: block;
}</code>

Ini akan menyebabkan semua elemen perenggan dipaparkan sebagai elemen peringkat blok.

Paparkan contoh penggunaan atribut

• Paparkan elemen tajuk sebagai elemen peringkat blok:

  <code class="css">h1 {
  display: block;
  }</code>

  Salin selepas log masuk

• Paparkan hiperpautan sebagai elemen sebaris:

  <code class="css">a {
  display: inline;
  }</code>

  Salin selepas log masuk
isikan kedua-dua elemen C dan baris ketiga dengan elemen lain Butang:

• <code class="css">button {
  display: inline-block;
  }</code>

  Salin selepas log masuk

Sembunyikan elemen pada halaman:

• <code class="css">#my-element {
  display: none;
  }</code>

  Salin selepas log masuk

Atas ialah kandungan terperinci Cara menggunakan paparan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!