box-sizing Özelliği Temel Özellikler
- CSS Yazımı :
box-sizing: content-box | border-box;- Örnek :
box-sizing: auto;|box-sizing: 13px;|box-sizing: 13%;- Öntanımlı Değer :
content-box- Uygulanabilen Etiketler :
- Genişlik ve yükseklik kabun eden tüm ögeler.
- Kalıtsallık :
- Yok.
- Tarayıcı Desteği :
- Tüm Tarayıcılar
- Animasyon :
- Desteklenmiyor
animationÖzelliği - Javascript :
öge.style.boxSizing = "10px";- Sürüm :
- CSS Basic User Interface Module Level 3
- Açıklama :
box-sizingözelliği çerçeve ve satır içi boşluk değerininwidthözelliği ile belirtilen içerik alanına ekleneceğini mi yoksa ondan çıkartılacağını mı belirler.
box-sizing Özelliği Kullanımı
Markanız için 300X300 alan.
CSS box-sizing özelliği; kullanıcı ajanının ögenin toplam genişliğini ve yüksekliğini nasıl işleyeceğini tanımlar.
CSS CSS Kutu Modelinde öntanımlı olarak, tanımladığınız genişlik ve yükseklik değerleri ögenin içerik kutusuna atanır. Eğer öge çerçeve ya da satır içi boşluğa iye ise bunlar ekranda gösterilen ögenin sağlanmış boyutlarına erişmesi için yüksekliğe ve genişliğe eklenir. Bunun anlamı şudur ki çerçeve ve satır içi boşluk kullandığınızda bu değerler ögenin boyutlarını arttırır.
box-sizing özelliği bu davranışı ayarlamada kullanılır.
-
content-boxsize öntanımlı CSS davranışını verir. Eğer ögenin boyutlarını x olarak belirlerseniz ögenin içerik kutusunun boyutları x olacak ama toplam genişlik ve yükseklik değerine çerçeve ve satır içi boşluk değerleri de eklenecektir. -
border-boxtarayıcıya çerçeve ve satır içi boşluk değerlerinin ögenin genişlik ve yükseklik değerlerinin içinde olduğunu bildirir. Eğer ögenin boyutları x olarak belirlenmişse çerçeve ve satır içi boşluk değerleri bu boyutun içindedir ve içerik kutusunun boyutları bu çerçeve ve satır içi boşluk değerleri çıktıktan sonra kalandır. Bu, ögeleri boyutlandırmayı epey kolaylaştırır.
box-sizing Özelliği Örneği
/* 100% genişlikte bir kasımız var. */
.kap{
/* box-sizing:content-box; - Öntanımlı tarayıcı davranışı. */
width:100%;
}
/*
* Kutu, genişliğin tamamını kaplıyor ama
* çerçeve eklediğimizde gerçekleşecek olan taşmayı engellemek için
* kutu genişliğinden çerçeve genişliğini çıkartmak zorunda kaldık.
*/
.kap{
width:calc(100% - 6px);
border:3px solid #cCc;
}
/*
* Çerçeveyi genişliğini her değiştirişinizde
* ögenin genişliğini yeniden ayarlamak yerine şöyle yapılması daha kolay:
*/
.kap{
box-sizing:border-box;
width:100%; /* 3px sağdan ve 3px soldan çerçeve genişliğini 100% genişlikten box-sizing değerinden ötürü düşecek. */
border:3px solid #cCc;
}Tüm etiketlere box-sizing özelliğini box-sizing:border-box; tanımlamanız işinizi kolaylaştıracaktır.
box-sizing Özelliği Tarayıcı Desteği
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | 1 -moz- [2]29 44 -webkit- [3]49 -webkit- |
7 | 3 —? -webkit-5.1 |
1 -webkit-10 [1] |
8 [1] |
padding-box |
1 — 50 | Yok | Yok | Yok | Yok |
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | 4 -moz- [2]29 44 -webkit- [3]49 -webkit- |
Var | Var | 2.1 -webkit-41 |
Var -webkit- |
padding-box |
4 — 50 | Yok | Yok | Yok | Yok |
[1] Yükseklik işlenirken window.getComputedStyle() işlevi kullanılırsa box-sizing dikkate alınmıyor.
[2] Firefox 23'ten önce yükseklik işlenirken window.getComputedStyle() işlevi kullanılırsa box-sizing dikkate alınmıyor.
[3] layout.css.prefixes.webkit seçimi true olarak değiştirilmeli. Firefox seçimlerini değiştirmek için about:cofig bulunağını açın.
box-sizing Özelliğinin Alabileceği Değerler
content-box- Çerçeve ve satır içi boşluklar -eğer varsa- içerik genişliğine ve yüksekliğine eklenecek.
border-box- Çerçeve ve satır içi boşluklar -eğer varsa- içerik genişliği ve yüksekliğinden düşülecek.