Bagaimana `min-kandungan` dan `maks-kandungan` Menentukan Saiz Kotak CSS?

Bagaimanakah kandungan min dan kandungan maks berfungsi?

Pengenalan kepada Dimensi Intrinsik

Dalam saiz CSS, konsep dimensi intrinsik berbeza dengan dimensi ekstrinsik. Dimensi intrinsik, seperti kandungan min dan kandungan maks, merujuk kepada sifat yang ditentukan oleh kandungan yang terkandung dalam kotak, menjadikannya bebas daripada kotak induknya. Ini bertentangan dengan dimensi ekstrinsik, yang bergantung pada dimensi kotak induk.

Takrif kandungan min

Kandungan min mewakili lebar minimum kotak dengan kandungan tidak melimpahi kotak itu sendiri. Ia sepadan dengan lebar terkecil yang boleh dilaksanakan yang mengelakkan limpahan kandungan.

Contoh

Pertimbangkan kotak bernama "merah" yang terapung di dalam kotak lain bernama "biru." Jika lebar "merah" ditetapkan kepada kandungan min, lebar pengiraannya ialah lebar yang diandaikan apabila lebar "biru" adalah sifar. Lebar ini mewakili ruang minimum yang diperlukan untuk menampung kandungan "merah" tanpa menyebabkan limpahan.

Takrifan kandungan maksimum

Kandungan maksimum ialah "ideal" saiz untuk kotak di sepanjang paksi yang diberikan. Ia bertujuan untuk meminimumkan ruang yang tidak terisi sambil menghalang limpahan. Dalam erti kata lain, ia mewakili penggunaan terbaik ruang yang ada dengan mengembangkan kandungan kotak pada paksi itu sehingga ia mencapai potensi maksimumnya.

Contoh

Serupa dengan yang sebelumnya contoh, "merah" kini terapung di dalam "biru." Walau bagaimanapun, kali ini, lebar "biru" ditetapkan kepada bilangan yang besar (tidak terhingga berkesan). Dengan menetapkan lebar "merah" kepada kandungan maksimum, ia akan mengembang untuk menduduki ruang maksimum yang tersedia dalam "biru" tanpa membazirkannya. Ini mewakili penggunaan terbaik ruang yang tersedia untuk kandungan "merah".

Atas ialah kandungan terperinci Bagaimana `min-kandungan` dan `maks-kandungan` Menentukan Saiz Kotak CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!