Kutu boyutlandırma - CSS Hileleri

Anonim

CSS'deki box-sizingözellik, uygulandığı öğe için kutu modelinin nasıl işleneceğini kontrol eder.

.module ( box-sizing: border-box; )

Bunu kullanmanın en yaygın yollarından biri, sözde öğeler dahil sayfadaki tüm öğelere uygulamaktır:

*, *::before, *::after ( box-sizing: border-box; )

Buna genellikle "evrensel kutu boyutlandırma" denir ve bu, çalışmanın iyi bir yoludur! widthAyarladığınız (değişmez) , zihinsel matematik yapmak zorunda kalmadan ve birden çok özellikten gelen genişliklerden gelen karmaşıklığı yönetmek zorunda kalmadan elde ettiğiniz genişliktir. Hatta burada bir kutu boyutlandırma farkındalık günümüz var.

Değerler

  • content-box: varsayılan. Genişlik ve yükseklik değerleri yalnızca öğenin içeriği için geçerlidir. Dolgu ve kenarlık kutunun dışına eklenir.
  • padding-box: Genişlik ve yükseklik değerleri, öğenin içeriği ve dolgusu için geçerlidir. Kenarlık kutunun dışına eklenir. Şu anda yalnızca Firefox bu padding-boxdeğeri desteklemektedir .
  • border-box: Genişlik ve yükseklik değerleri içerik, dolgu ve kenarlık için geçerlidir.
  • inherit: üst öğenin kutu boyutunu devralır.

Misal

Bu örnek resim, varsayılan content-box(üst) ile border-box(alt) karşılaştırır:

Görüntüler arasındaki kırmızı çizgi, elemanların genişlik değerini temsil eder. Varsayılana sahip öğenin box-sizing: content-box;, dolgu ve kenarlık içerik kutusunun dışına eklendiğinde bildirilen genişliği aştığına, box-sizing: border-box;uygulanan öğenin ise belirtilen genişliğe tamamen sığdığına dikkat edin.

Kutu Boyutlandırmayı Kullanma

Diyelim ki bir öğe ayarladınız width: 100px; padding: 20px; border: 5px solid black;. Varsayılan olarak, ortaya çıkan kutu 150 piksel genişliğindedir. Bunun nedeni, varsayılan kutu boyutlandırma modelinin, content-boxbir öğenin beyan edilen genişliğini yalnızca içeriğine uygulayan, dolguyu ve kenarlığı öğenin kutusunun dışına yerleştirmesidir. Bu, elemanın ne kadar yer kapladığını etkili bir şekilde artırır.

Eğer değiştirirseniz box-sizingiçin padding-box, dolgu elementin kutunun içinde itilir. Daha sonra, kutu 110 piksel genişliğinde olacak, içeride 20 piksel dolgu ve dışarıda 10 piksel kenarlık olacak. Kutunun içine dolguyu ve bordürü koymak isterseniz kullanabilirsiniz border-box. Kutu 100 piksel genişliğinde olacaktır - 10 piksellik kenarlık ve 20 piksellik dolgu öğenin kutusunun içine itilir.

Demo

CodePen'de CSS-Tricks (@ css-tricks) ile kutu boyutlandırma değerlerinin Kalem Karşılaştırmasına bakın.

İlişkili

  • width
  • height
  • padding
  • border

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
Hiç *† 3 * † 1 ‡ 7 * 8 * 2.1 * † Hiç *

* padding-boxdesteklenmiyor

† eski sürümler -webkitön ek gerektirir (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -moz28 sürümüne kadar önek gerekli, 29'dan itibaren ön ek yapılmamış.