Bagaimana untuk mengawal penyembunyian dan paparan dalam paparan css

Sifat Paparan CSS digunakan untuk menetapkan mod paparan elemen. Anda boleh menggunakannya untuk mengawal aspek seperti keterlihatan, reka letak dan saiz elemen, jadi ia adalah perkara biasa dalam aplikasi CSS.

Tetapan Paparan CSS

Dalam CSS, sifat Paparan boleh menerima nilai berikut:

• tiada
• sebaris
• blok
• blok sebaris
• jadual
• sel jadual
• baris jadual
• jadual sebaris
• flex
• grid

Perlu diambil perhatian bahawa elemen berbeza menyokong atribut Paparan yang berbeza, yang memerlukan pemilihan nilai atribut yang sesuai berdasarkan situasi sebenar.

Paparan CSS tiada

Gunakan Paparan:tiada untuk menyembunyikan elemen sepenuhnya. Ini bermakna elemen itu tidak mengambil sebarang ruang pada halaman dan tidak memberi kesan kepada elemen lain. Ciri ini sangat berguna dalam pembangunan web di mana elemen HTML perlu dipaparkan atau disembunyikan secara dinamik.

Paparan CSS sebaris

Gunakan Paparan:sebaris untuk memaparkan elemen sebagai elemen sebaris, iaitu, ia akan disusun pada baris yang sama seperti teks biasa. Ia mengabaikan atribut lebar dan ketinggian elemen dan memaparkannya hanya berdasarkan saiz kandungan.

Blok Paparan CSS

Gunakan Paparan:sekat untuk memaparkan elemen sebagai elemen peringkat blok, iaitu, mereka akan menduduki baris mereka sendiri pada halaman. Ciri ini sangat berguna kerana ia membolehkan kami mempunyai susun atur elemen HTML yang lebih khusus.

Css Display inline-block

Gunakan Display:inline-block untuk memaparkan elemen sebagai kedua-dua elemen sebaris dan elemen peringkat blok, iaitu, ia akan disusun pada baris yang sama, tetapi boleh dipaparkan seperti Elemen peringkat blok juga menetapkan atribut seperti saiz.

Jadual Paparan CSS

Gunakan Paparan:jadual untuk memaparkan elemen sebagai jadual. Ini bermakna bahawa elemen akan mengandungi pengepala, badan dan pengaki, dan boleh ditetapkan menggunakan sifat berkaitan jadual.

CSS Display table-cell

Gunakan Display:table-cell untuk memaparkan elemen sebagai sel jadual, iaitu elemen akan menjadi sel dalam jadual. Ia boleh melaraskan lebar dan ketinggian secara automatik antara lajur dan baris, jadi ia sangat berguna.

CSS Display table-row

Gunakan Display:table-row untuk memaparkan elemen sebagai baris jadual, iaitu elemen akan menjadi satu baris dalam jadual. Ia juga sangat berguna kerana ia membolehkan anda mempunyai susun atur baris jadual yang lebih khusus.

Meja sebaris Paparan CSS

Gunakan Paparan:jadual sebaris untuk memaparkan elemen sebagai kedua-dua elemen sebaris dan jadual. Ini membolehkan kami membuat jadual dalam elemen sebaris.

Flex Paparan CSS

Gunakan Display:flex untuk menjadikan elemen kotak fleksibel. Ini bermakna elemen dalam bekas boleh diselaraskan, disusun dan ditambah/dialih keluar mengikut kehendak anda.

Grid Paparan CSS

Gunakan Paparan:grid untuk menjadikan elemen sebagai bekas grid. Ini bermakna anda boleh membahagikan halaman ke dalam grid dan meletakkan elemen dalam saiz dan kedudukan yang berbeza, yang sangat berguna.

Paparan CSS menyembunyikan dan menunjukkan elemen

Ciri penting Paparan CSS ialah ia boleh digunakan untuk menyembunyikan atau menunjukkan elemen HTML. Paparan: Tiada yang sering digunakan untuk menyembunyikan dan menunjukkan elemen.

Apabila kod berikut berkuat kuasa, elemen akan disembunyikan:

display: none;

Apabila anda perlu memaparkan elemen, cuma tetapkan atribut Paparan kepada nilai yang sesuai, contohnya:

display: block;

Ini akan menjadikan elemen dipaparkan semula.

Kesimpulan

Harta Paparan CSS sangat penting dalam pembangunan web dan boleh digunakan untuk mengawal reka letak, keterlihatan dan saiz elemen untuk mencapai reka bentuk halaman yang kompleks. Memahami nilai Paparan yang berbeza dan kes penggunaannya ialah langkah penting dalam menguasai kemahiran asas CSS.

Atas ialah kandungan terperinci Bagaimana untuk mengawal penyembunyian dan paparan dalam paparan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!