Box-sizing
box-sizing: border-box ile kutu hesaplamasını öğrenirsin.
box-sizing nedir?
Varsayılan olarak width yalnızca içerik alanını ölçer; padding ve border buna eklenir. Yani width: 200px + padding: 20px + border: 5px gerçek genişliği 250 piksel yapar. Buna content-box modeli denir.
box-sizing: border-box yazarsan, width padding ve border dahil toplam genişliği belirler. Aynı örnekte toplam 200 piksel kalır; içerik alanı daralır. Hesap daha sezgisel olduğundan çoğu geliştirici bunu tercih eder.
Tüm öğelere uygulamak
box-sizing varsayılanı değiştirmek için genelde tüm öğelere uygulanır. Yaygın kalıp:
*, *::before, *::after {
box-sizing: border-box;
}Bu kalıp her öğeyi, sözde öğeleri de dahil, border-box modeline geçirir. Böylece width: 100% yazdığında padding eklenince taşma olmaz. Kart ve kapsayıcı gibi bileşenlerde ölçü hesabı artık tutarlıdır.
Uygulama box-sizing kalıbını yaz
Tüm öğelere ve sözde öğelere box-sizing: border-box uygulayan kalıbı yaz. Seçiciler: *, *::before, *::after.
Örnek çözümü göster
*,
*::before,
*::after {
box-sizing: border-box;
}Kendini test et
-
border-box'ta toplam genişlik
/* width: 200px, padding: 20px, border: 5px, box-sizing: border-box */ /* toplam genişlik = ____px */Cevabı göster
/* width: 200px, padding: 20px, border: 5px, box-sizing: border-box */ /* toplam genişlik = 200px */ -
box-sizing: border-box neyi değiştirir?
- width artık içerik alanını ölçer, padding ve border eklenir
- width padding ve border dahil toplam genişliği ölçer
- padding ve border artık kutudan çıkarılır
- margin de width içine dahil edilir
Cevabı göster
width padding ve border dahil toplam genişliği ölçer — Doğru. border-box'ta width padding ve border dahil toplam genişliktir.
-
Kutu modellerini eşleştir
- content-box
- Varsayılan kutu modeli
- border-box
- padding ve border width'e dahil
- width: 200px (content-box)
- İçerik 200px, toplam daha büyük
- width: 200px (border-box)
- Toplam 200px, içerik daha küçük