Bagaimanakah gelagat elemen sebaris berubah apabila ia mengandungi elemen kanak-kanak yang digayakan sebagai elemen blok dan bagaimana ini berbeza daripada senario di mana elemen induk ditakrifkan sebagai blok el

paparan:blok Paparan dalam:sebaris

Dalam dunia CSS, elemen sebaris biasanya berkelakuan sebagai sebahagian daripada teks yang mengalir bersama baris induknya, manakala elemen blok memulakan baris baharu. Walau bagaimanapun, gelagat elemen sebaris menjadi lebih kompleks apabila ia mengandungi elemen kanak-kanak yang digayakan sebagai elemen blok.

Pertimbangkan senario berikut, seperti yang diterangkan dalam spesifikasi CSS 2.1:

<code class="css">body { display: inline }
p    { display: block }</code>

Dalam ini kes, elemen badan mempunyai paparan: gaya sebaris, manakala elemen anaknya p mempunyai paparan: gaya blok. Gabungan ini mencipta situasi unik di mana elemen badan, pada mulanya ditakrifkan sebagai sebaris, kelihatan lebih berkelakuan seperti elemen blok.

Kehadiran elemen p peringkat blok menyebabkan elemen badan pecah ke dalam kotak blok tanpa nama sekitar kandungan teksnya (C1 sebelum p dan C2 selepas p). Elemen p menjadi adik kepada kotak tanpa nama ini.

Secara visual, kotak yang terhasil boleh diwakili seperti berikut:

+- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- P block box -------------------+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- anonymous block box around C2 -+ |
| |                                 + |
| +---------------------------------+ |
+-------------------------------------+

Tingkah laku ini berbeza daripada senario di mana elemen badan ditakrifkan sebagai elemen blok (paparan: blok). Dalam kes elemen blok, kandungan teks badan disertakan dalam elemen badan itu sendiri, dan bukannya dibahagikan kepada kotak tanpa nama.

+--------------------------------------+
| This is anonymous text before the P. |
|                                      |
| This is the content of P.            |
|                                      |
| This is anonymous text after the P.  |
+--------------------------------------+

Satu perbezaan utama antara kedua-dua kes ialah penggunaan sifat untuk kotak blok tanpa nama. Spesifikasi CSS 2.1 menyatakan bahawa sifat yang ditetapkan pada elemen yang menjana kotak blok tanpa nama masih digunakan pada kotak tersebut dan kandungannya. Ini bermakna sifat seperti sempadan atau padding akan digunakan pada kotak awanama yang dibuat oleh elemen sebaris.

Ringkasnya, manakala elemen sebaris yang mengandungi elemen blok kelihatan berkelakuan serupa dengan elemen blok, terdapat perbezaan halus dalam cara sifat digunakan dan reka letak diberikan. Spesifikasi CSS 2.1 memberikan penjelasan terperinci tentang perbezaan ini, membantu pembangun memahami gelagat elemen tersebut dalam halaman web mereka.

Atas ialah kandungan terperinci Bagaimanakah gelagat elemen sebaris berubah apabila ia mengandungi elemen kanak-kanak yang digayakan sebagai elemen blok dan bagaimana ini berbeza daripada senario di mana elemen induk ditakrifkan sebagai blok el. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!