Penjelasan terperinci tentang penggunaan paparan dalam css

CSS ialah bahagian penting dalam reka bentuk web dan atribut paparan ialah salah satu atribut yang lebih penting. Fungsi utama atribut paparan adalah untuk mengawal mod paparan elemen dalam halaman web, termasuk blok, sebaris, blok sebaris, lentur, grid dan kaedah lain. Dalam artikel ini, kami akan memperkenalkan penggunaan atribut paparan.

1. sekat

sekat ialah nilai lalai atribut paparan. Apabila elemen ditetapkan untuk menyekat, ia akan dipaparkan sebagai elemen peringkat blok pada halaman, yang akan menduduki keseluruhan baris dan membalut secara automatik. Elemen peringkat blok biasa termasuk p, h1~h6, div, dsb. Elemen peringkat blok boleh menetapkan atribut seperti lebar, tinggi, jidar dan pelapik atau menyembunyikan elemen melalui paparan:tiada.

Kod sampel:

<div>我是一个块级元素</div>

2. sebaris

sebaris ialah satu lagi atribut paparan biasa. Apabila elemen ditetapkan kepada sebaris, ia akan muncul pada halaman sebagai elemen sebaris, ia tidak akan membalut dan akan dimuatkan dalam satu baris. Elemen sebaris biasa termasuk a, span, img, dsb. Lebar dan ketinggian elemen sebaris bergantung pada kandungan elemen. Margin dan padding tidak boleh ditetapkan dan elemen tidak boleh disembunyikan melalui display:none.

Kod contoh:

<a href="#">我是一个内联元素</a>

3. blok sebaris

blok sebaris ialah gabungan blok dan sebaris, apabila elemen ditetapkan kepada inline -block, ia akan dipaparkan sebagai elemen peringkat blok sebaris pada halaman Ia tidak akan menduduki keseluruhan baris, tetapi boleh mempunyai lebar, ketinggian, jidar dan padding, dan paparan: tiada boleh ditetapkan.

Kod sampel:

<span style="display:inline-block;width:50px;height:50px;background-color:red;"></span>

4. flex

flex ialah atribut yang baru ditambah dalam CSS3, yang boleh menjadikan reka letak elemen lebih fleksibel . Apabila elemen ditetapkan kepada lentur, ia menjadi bekas, dan sub-elemen di dalamnya boleh melaraskan lebar, ketinggian dan reka letak secara fleksibel dengan menetapkan atribut lentur. Anda perlu menetapkan display:flex untuk mendayakan atribut flex Anda boleh menetapkan flex-direction, justify-content, align-item, align-content dan atribut lain untuk mengawal reka letak elemen anak.

Kod sampel:

<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;">
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:red;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:green;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:blue;"></span>
</div>

5. grid

grid ialah satu lagi atribut yang baru ditambah dalam CSS3, yang boleh digunakan untuk mencipta reka letak grid. Sama seperti flex, anda perlu menetapkan paparan:grid untuk mendayakan atribut grid Anda boleh mengawal reka letak grid melalui atribut seperti grid-template-rows, grid-template-lajur dan grid-template-kawasan.

Kod sampel:

<div style="display:grid;grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 100px;">
  <div style="grid-row: 1/3;grid-column: 1/3;">1</div>
  <div style="grid-row: 1/2;grid-column: 3/4;">2</div>
  <div style="grid-row: 2/3;grid-column: 3/4;">3</div>
</div>

Di atas ialah penggunaan atribut paparan Anda boleh memilih atribut yang sesuai mengikut keperluan anda untuk mengawal reka letak elemen dan mencapai kesan reka bentuk web .

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