Mengapa Peratusan Ketinggian dalam CSS Berkelakuan Berbeza Daripada Peratusan Lebar?

Mengapa Peratusan Tinggi Berbeza daripada Lebar dalam CSS

Soalan: Walaupun penerapan nilai peratusan yang berjaya untuk lebar, mengapa peratusan ketinggian gagal mencapai kesan yang sama?

Jawapan: perbezaan asas terletak pada kelakuan lalai elemen blok. Ketinggian unsur-unsur ini sememangnya menyesuaikan diri dengan kandungan yang disertakan. pertimbangkan contoh berikut:

<div>

Di sini, #inner akan mengembang secara menegak untuk menampung teks dalam

dan #outer akan melaraskan ketinggiannya untuk mengandungi #inner.

Apabila menentukan peratusan ketinggian atau lebar, ia merujuk kepada elemen induk. Untuk lebar, elemen blok biasanya menjangkau lebar penuh induknya, menjadikan hasilnya boleh diramal. Lebar tetapan: 50% diterjemahkan kepada lebar piksel tertentu.

Walau bagaimanapun, ketinggian berbeza kerana ketinggian elemen blok ditentukan oleh kandungan. Menetapkan ketinggian: 50% adalah samar-samar tanpa mentakrifkan ketinggian elemen induk secara eksplisit. Gelung maklum balas antara elemen ibu bapa dan anak ini mewujudkan ketidakpastian dalam menentukan ketinggian akhir. Untuk memecahkan kitaran ini, elemen induk mesti mempunyai ketinggian yang ditentukan.

Atas ialah kandungan terperinci Mengapa Peratusan Ketinggian dalam CSS Berkelakuan Berbeza Daripada Peratusan Lebar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!