Apakah nilai atribut paparan dalam css?

百草
Lepaskan: 2023-11-14 14:09:11
asal
3088 orang telah melayarinya

Nilai atribut paparan dalam css termasuk inline, block, inline-block, none, flex, grid, table, inline-table, list-item atau inherit, dsb. Pengenalan terperinci: 1. sebaris, elemen dipaparkan sebagai elemen sebaris dan dipaparkan dalam baris yang sama dengan elemen bersebelahan Atribut lebar dan ketinggian tidak mempunyai kesan, dan atribut margin dan padding hanya boleh menetapkan nilai kiri dan kanan; 2. blok, elemen ialah Tunjukkan dsb.

Apakah nilai atribut paparan dalam css?

Sistem pengendalian untuk tutorial ini: sistem Windows 10, komputer DELL G3.

Atribut paparan dalam CSS digunakan untuk mentakrifkan cara sesuatu elemen dipaparkan, yang menentukan cara elemen itu dipersembahkan pada halaman. Atribut paparan mempunyai nilai atribut biasa berikut:

1: Elemen dipaparkan sebagai elemen sebaris dan dipaparkan pada baris yang sama dengan elemen bersebelahan. Atribut lebar dan ketinggian tidak mempunyai kesan, dan atribut margin dan padding hanya boleh menetapkan nilai kiri dan kanan. Elemen sebaris biasa termasuk span, a, img, dsb.

2: Elemen dipaparkan sebagai elemen peringkat blok dan menduduki baris eksklusif. Atribut lebar dan tinggi boleh ditetapkan, dan atribut margin dan padding boleh ditetapkan dalam empat arah. Elemen peringkat blok biasa termasuk div, p, h1, dsb.

3 blok sebaris: Elemen dipaparkan sebagai elemen peringkat blok sebaris, dipaparkan pada baris yang sama dengan elemen bersebelahan. Atribut lebar dan tinggi boleh ditetapkan, dan atribut margin dan padding boleh ditetapkan dalam empat arah. Elemen peringkat blok sebaris biasa termasuk butang, input, dsb.

4: Unsur tidak dipaparkan, iaitu unsur tersembunyi. Elemen tidak menduduki sebarang ruang pada halaman dan tidak bertindak balas kepada peristiwa interaksi.

5 flex: Gunakan reka letak fleksibel untuk memaparkan elemen, membenarkan reka letak yang fleksibel. Ia membolehkan elemen mengubah saiz dan kedudukan secara automatik berdasarkan ruang yang tersedia. Biasanya digunakan bersama-sama dengan flex-direction, flex-wrap dan sifat-sifat lain.

6: Gunakan reka letak grid untuk memaparkan elemen dan meletakkan elemen dalam grid dua dimensi. Reka letak grid menyediakan kawalan susun atur yang lebih tepat dan boleh menentukan saiz, jarak, dsb. baris dan lajur. Biasanya digunakan bersama-sama dengan grid-template-lajur, grid-template-baris dan atribut lain.

7: Elemen dipaparkan sebagai jadual, serupa dengan elemen jadual dalam HTML. Elemen akan dihuraikan ke dalam objek jadual, yang boleh mengandungi sub-elemen seperti pengepala jadual (thead), badan jadual (tbody) dan pengaki meja (tfoot).

8: Elemen dipaparkan sebagai jadual sebaris, dipaparkan dalam baris yang sama dengan elemen bersebelahan. Serupa dengan atribut jadual, tetapi dipaparkan sebagai elemen sebaris.

9: Elemen dipaparkan sebagai item senarai, serupa dengan elemen li dalam HTML. Digunakan untuk subitem dalam senarai tidak tersusun (ul) dan senarai tersusun (ol).

10: Warisi nilai atribut paparan elemen induk. Jika tiada unsur induk, ia dianggap sebagai blok.

Ini ialah beberapa nilai atribut biasa bagi atribut paparan dalam CSS Dengan menetapkan nilai atribut paparan yang berbeza, anda boleh mengawal cara elemen dipaparkan pada halaman dan mencapai pelbagai kesan reka letak secara fleksibel.

Atas ialah kandungan terperinci Apakah nilai atribut paparan dalam css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
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
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!