Ketahui lebih lanjut tentang nilai atribut biasa bagi atribut paparan dalam CSS

Pemahaman yang mendalam tentang nilai atribut biasa atribut paparan dalam CSS, contoh kod khusus diperlukan

Pengenalan:

Atribut paparan CSS ialah salah satu atribut penting yang mengawal cara elemen dipaparkan . Ia menentukan cara elemen dibentangkan dalam dokumen, termasuk sama ada untuk menjana kotak, sama ada untuk menduduki baris eksklusif, sama ada untuk kelihatan, dsb. Artikel ini akan memperkenalkan secara mendalam nilai atribut biasa bagi atribut paparan dan melampirkan contoh kod khusus untuk membantu pembaca lebih memahami dan menguasai penggunaan nilai atribut ini.

1. block

blok ialah nilai lalai atribut paparan, yang menyebabkan elemen menjana kotak peringkat blok dan menduduki barisnya sendiri. Elemen blok biasa termasuk div, p, h1-h6, dsb.

Contoh kod:

<div style="display: block; background-color: red; width: 200px;">
    这是一个块级元素
</div>

2. sebaris

sebaris menjadikan elemen menjana kotak sebaris dan tidak menduduki satu baris. Elemen sebaris biasa termasuk span, a, img, dsb.

Contoh kod:

<span style="display: inline; background-color: yellow;">
    这是一个行内元素
</span>

3. inline-block

inline-block menjadikan elemen menjana kotak peringkat blok sebaris, yang tidak menduduki garisan eksklusif dan tidak boleh menetapkan lebar dan tinggi. Elemen blok sebaris biasa termasuk input, butang, dsb.

Kod sampel:

<input type="text" style="display: inline-block; width: 200px; height: 30px;">

4. none

tiada membuat elemen tidak menjana kotak, iaitu menyembunyikan elemen sepenuhnya. Elemen tersembunyi tidak akan menduduki sebarang ruang dan tidak akan menjejaskan reka letak elemen lain.

Kod contoh:

<div style="display: none;">
    这是一个隐藏的元素
</div>

5. flex

flex menetapkan elemen sebagai bekas kotak fleksibel, membolehkan susun atur item di dalam kotak dilaraskan melalui sifat kotak. Nilai biasa untuk atribut flex termasuk baris, lajur, baris-terbalik, lajur-terbalik, dsb.

Kod contoh:

<div style="display: flex; flex-direction: row; justify-content: space-between;">
    <div style="width: 100px; height: 100px; background-color: red;"></div>
    <div style="width: 100px; height: 100px; background-color: blue;"></div>
    <div style="width: 100px; height: 100px; background-color: green;"></div>
</div>

Kesimpulan:

Atribut paparan ialah atribut yang sangat berguna dalam CSS, yang boleh mengawal mod paparan elemen Nilai atribut biasa termasuk blok, sebaris, blok sebaris, tiada dan lentur, dll. Dengan mempunyai pemahaman yang mendalam tentang nilai atribut ini dan menggabungkannya dengan contoh kod tertentu, pembaca akan dapat memahami dengan lebih baik dan menggunakan nilai atribut ini dan mencapai kesan susun atur halaman yang lebih baik. Semoga artikel ini bermanfaat kepada pembaca.

Atas ialah kandungan terperinci Ketahui lebih lanjut tentang nilai atribut biasa bagi atribut paparan dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!