CSS box-sizing Özelliği

CSS box-sizing

Css boox-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 inceleyerek box-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

Bu blogdaki popüler yayınlar

HTML progress Etiketi

CSS content Özelliği

HTML section Etiketi

CSS transition-delay Özelliği

CSS align-items özelliği

CSS text-justify Özelliği

CSS overflow Özelliği

CSS justify-content Özelliği

CSS border-collapse Özelliği

HTML5 Canvas Oyun Yapımı Dersleri