Box-Sizing Özelliği
Css Box-Model konumuzda sayfa tasarımı yapılırken html elemanlarının width (genişlik), height (yükseklik), margin (dış boşluk), padding (iç boşluk), border (kenarlık) gibi özelliklerinin nasıl ayarlanması gerektiğini şu konumuzda anlatmıştık(tıklayınız). Bu geleneksel yönteme göre bir nesnenin toplam kapladığı yer hesaplanırken width, margin, padding ve border değerlerinin tümünün ne kadar yer kapladığı hesaplanmalıdır.
Eğer bu yöntemi kullanmakta zorlanıyorsak, box-sizing özelliği işimizi biraz kolaylaştırabilir.
Not: Box-Sizing özelliği bazı eski tarayıcı versiyonlarında –webkit- ve –moz- ön ekleri ile desteklense de, daha eski versiyonlarda hiç desteklenmeyeceği için, geleneksel yöntemi de öğrenmekte fayda var.
Box-Sizing Özelliğinin Kullanımı
Bir html elemanına box-sizing: border-box; özelliği uyguladığımızda, border ve padding değerleri de width değeri içerisinde kabul edilir. (margin değeri dahil edilmez.)
Bunu iki örnek ile açıklayalım.
1. örneğimizde iki kutu yer alıyor. Bunların ikisinin de width değeri 200px’tir. Ancak padding değerleri farklıdır. İkinci kutu padding değeri daha fazla olduğu için, hem genişlik hem de yükseklik olarak daha fazla yer kaplamaktadır.
.kutu1 {
width: 200px;
height: 100px;
padding: 0px;
border: 1px solid blue;
}
.kutu2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Box-sizing örneği
Box-sizing örneği
2. örneğimizde de kutuların özellikleri aynı. Ancak kutulara ayrıca box-sizing: border-box; özelliği uyglanmıştır. Box-sizing özelliği sayesinde kutuların width özelliğinde belirtilen değer kadar yer kaplaması sağlanıyor.
* Aynı şeyler yükseklik (height) için de geçerlidir.
.kutu1 {
width: 200px;
height: 100px;
padding: 0px;
border: 1px solid blue;
box-sizing: border-box;
}
.kutu2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Box-sizing örneği
Box-sizing örneği
Yani box sizing özelliği, width değerinin anlamını değiştiriyor şeklinde düşünebiliriz.
Konu Örnekleri kısmında bu örneklerin kodlarını değiştirerek sonuçları görebilirsiniz.
Border-box değerinden başka şu değerler de kullanılabilir:
content-box: Normal hale döndürür. Width değeri sadece içerik kısmının genişliğini ifade eder.
initial: Varsayılan değere döndürür.
inherit: Bir üst etiketin (parent) değeri geçerli olur.
Tüm Etiketlere Uygulama: Sayfa tasarımında box-sizing özelliğini kullanacaksak, her elemana tek tek yazmak yerine, aşağıdaki gibi kısa yoldan tüm elemanlara uygulayabiliriz.
* {
box-sizing: border-box;
}
css box sizing kullanımı ve örnekleri, html elemanlarının kapladığı yeri hesaplama, width padding ve border ayrı ayrı hesaplamadan tasarım yapma
KONU İLE İLGİLİ ÖRNEKLER
14275 kez okundu.