CSS box-sizing Özelliği
CSS box-sizing
Cssboox-sizing özelliğini kullanarak bir div elemanına uygulanan padding değerleri ,elemana verilen genişlik ve yükseklik değerlerini etkilemeden tasarım yapılmasına olanak verir.
Örnek:
Bu örneği inceleyerekbox-sizing özelliğinin ne işe yaradığını öğrenebilirsiniz.(ilk iki kutuda padding değerinin etkisi gösterilecektir. Daha sonraki kutularda ise padding değerini etkisiz kılan box-sizing özelliğini anlamış olacaksınız.).birincikutu {
width: 220px;
height: 150px;
border: 4px solid yellow;
}
.ikincikutu {
width: 220px;
height: 150px;
padding: 40px;
border: 4px solid yellow;
}
.ucuncukutu {
width: 220px;
height: 150px;
border: 4px solid pink;
box-sizing: border-box;
}
.dorduncukutu {
width: 220px;
height: 150px;
padding: 40px;
border: 4px solid pink;
box-sizing: border-box;
}
CSS box-sizing nedir nasıl kullanılır
Css box -sizing özelliği tarayıcalara elemanların boyut özelliklerinin kenarlarına göre mi içeriklerine göre mi gösterileceğini anlatmak için kullanılır.
| CSS box-sizing | CSS box-sizing özellikleri | |
|---|---|---|
| Varsayılan Değer: | content-box | |
| Kalıtsallık: | yok | |
| Animasyon Özelliği: | yok | |
| Versiyon: | CSS3 | |
| JavaScript box-sizing: | object.style.boxSizing="border-box" |
CSS box-sizing Tarayıcı Desteği
Tabloda gösterilen sayılar özelliğin tam desteklendiği ilk tarayıcı sürümlerini gösterir.
| CSS Kodu: | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
CSS box-sizing Değerleri
box-sizing:content-box|border-box|initial|inherit;
CSS box-sizing özelliği değerleri
| CSS box-sizing değerleri | CSS box-sizing değerleri tanımları |
|---|---|
| content-box | Varsayılan değerdir. Width ve height özellikleri ( ve min / max özellikleri) sadece içerik içermektedir . Sınır , dolgu veya marjı dahil değildir |
| border-box | Elemanın genişliği ve yüksekliği referans alınarak işlem yapılır. Padding değerleri kutunun genişliğini ve yüksekliğini etkilemez. |
| initial | Özelliğin varsayılan değeridir. |
| inherit | Soybağından gelen değeri alır. |
Yorumlar
Yorum Gönder