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>

• Paparkan hiperpautan sebagai elemen sebaris:

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

isikan kedua-dua elemen C dan baris ketiga dengan elemen lain Butang:

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

Sembunyikan elemen pada halaman:

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

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