Meneroka kerumitan lebar dan ketinggian dalam CSS

Artikel ini, yang dikarang oleh Uri Shaked dan Michal Porag, menyelidiki selok-belok CSS lebar dan pengiraan ketinggian. Berdasarkan debugging dan analisis spesifikasi CSS yang luas, kami akan membongkar kelakuan dimensi elemen yang sering tidak dijangka.

Konsep asas:

Anda mungkin menganggap tetapan width: 640px; dan height: 360px; menghasilkan elemen 640x360 piksel. Walau bagaimanapun, menambah perubahan padding ini. Dengan padding: 10px; , saiz yang diberikan menjadi 660x380px kerana box-sizing content-box lalai. Model kotak mengira lebar dan ketinggian seperti berikut:

• Lebar: width padding-left padding-right border-left border-right
• Ketinggian: height padding-top padding-bottom border-top border-bottom

Ini terpakai untuk unsur-unsur peringkat blok (misalnya,<div> ,<code><p> ,<code><main></main> ), yang secara semulajadi berkembang untuk mengisi lebar yang ada. Unsur -unsur dalam talian berkelakuan berbeza.

Nuansa elemen dalam talian:

Untuk elemen sebaris (misalnya,<span></span> ), width dan height sebahagian besarnya diabaikan; Dimensi ditentukan oleh kandungan. Bersarang elemen blok dalam elemen inline mengganggu aliran inline, menonjolkan perbezaan ini. Unsur -unsur sebaris juga mengabaikan margin top dan bottom .

Interaksi ibu bapa dan kanak-kanak:

Hubungan ibu bapa dan kanak-kanak memberi kesan kepada pengiraan dimensi.

• Unit Relatif: Peratusan adalah relatif kepada dimensi elemen induk. Kanak -kanak dengan width: 100%; mengamalkan lebar ibu bapa. Ketinggian berkelakuan sama.

• Padding dan margin: padding dan margin berasaskan peratusan sentiasa relatif kepada lebar ibu bapa, walaupun untuk nilai menegak. "Hack padding" ini digunakan untuk membuat kotak nisbah aspek, walaupun harta aspect-ratio kini lebih disukai.

• display: inline dan inline-block : display: inline; membuat unsur-unsur sebaris, sementara display: inline-block; Menggabungkan tingkah laku sebaris dengan pengiraan model kotak peringkat blok, menghormati margin , width , dan height .

Saiz Peratusan Siklik:

Elemen kanak -kanak dengan lebar relatif (contohnya, 33% ) dalam ibu bapa yang tidak mempunyai lebar yang diisytiharkan mencipta senario "saiz siklik". Penyemak imbas secara beransur -ansur mengira lebar ibu bapa berdasarkan kandungan kanak -kanak, kemudian menggunakan lebar peratusan kanak -kanak berbanding dengan lebar induk yang baru dikira.

min-width , min-height , max-width , max-height :

Ciri -ciri ini menentukan had saiz minimum dan maksimum. Walaupun dengan lebar eksplisit (contohnya, 100% ), max-width dapat mengekang saiz elemen. Bertukar width dan nilai max-width boleh menghasilkan hasil yang berbeza apabila elemen induk terlibat, terutamanya dengan display: inline-block; .

min() , max() , dan clamp() :

Fungsi ini memberikan ukuran responsif tanpa pertanyaan media:

• min() : Mengembalikan minimum hujahnya.
• max() : Mengembalikan maksimum hujahnya.
• clamp() : gabungan min() dan max() .

Fungsi ini menawarkan cara ringkas untuk menentukan dimensi elemen responsif.

Kesimpulan:

Pengiraan lebar dan ketinggian CSS sangat mengejutkan. Walaupun nilai-nilai eksplisit ditentukan, dimensi yang diberikan dipengaruhi oleh model kotak, jenis elemen (blok vs inline), hubungan ibu bapa dan kanak-kanak, unit relatif, dan faktor lain. Memahami kerumitan ini adalah penting untuk kawalan susun atur yang tepat.

Pengarang: Uri Shaked dan Michal Porag

Atas ialah kandungan terperinci Meneroka kerumitan lebar dan ketinggian dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!