Cara menggunakan paparan dalam css

下次还敢
Lepaskan: 2024-04-26 12:03:16
asal
1194 orang telah melayarinya

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.

Cara menggunakan paparan dalam css

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>
Salin selepas log masuk

Contohnya:

<code class="css">p {
  display: block;
}</code>
Salin selepas log masuk

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!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan