Style boxSizing özelliği

Tanım ve kullanım

boxSizing Özellik, belirli bir alanı belirli bir elemente eşleştirmek için belirli bir şekilde tanımlamanıza olanak tanır.

Örneğin, iki kenar çerçeveli kutuyu yan yana yerleştirmeniz gerekiyorsa, box-sizing'ı "border-box" olarak ayarlayabilirsiniz. Bu, tarayıcının belirli genişlik ve yüksekliğe sahip kutular sunmasını sağlar ve çerçeve ve iç kenar boşluklarını kutunun içine yerleştirir.

Daha fazla bkz:

CSS referans el kitabı:box-sizing özelliği

Örnek

boxSizing özelliğini değiştirme:

document.getElementById("myDIV").style.boxSizing = "border-box";

Kişisel olarak deneyin

Gramer

boxSizing özelliğini döndürme:

nesne.style.boxSizing

boxSizing özelliğini ayarlama:

nesne.style.boxSizing = "content-box|border-box|initial|inherit"

Özellik değeri

Değer Açıklama
content-box

Öntanımlı değer. Bu, CSS2.1 tarafından belirlenen genişlik ve yükseklik davranışıdır.

Belirlenen genişlik ve yükseklik (ve min/max özellikleri) sırasıyla elemanın içerik kutusunun genişliği ve yüksekliğine uygulanır.

Elemanın iç kenar boşluğu ve çerçevesi, belirlenen genişlik ve yükseklik dışında yerleştirme ve çizim yapar
border-box

Elemana belirlenen genişlik ve yükseklik, elemanın çerçeve kutusunu belirler.

Yani, elemana belirlenen herhangi bir iç kenar boşluğu ve çerçeve, belirlenen genişlik ve yükseklik içinde çizilir.

İç kenar boşluğu ve çerçeve, belirlenen genişlik ve yükseklikten ayrılmadan içerik genişliği ve yüksekliğini elde etmek için kullanılır.
initial Bu özelliği öntanımlı değerine ayarlar. bkz. initial。
inherit Bu özelliği, ebeveyn elemanından bu özelliği devralır. bkz. inherit。

Teknik ayrıntılar

Öntanımlı değer: content-box
Dönüş değeri: dizesel, elemanın box-sizing özelliği。
CSS sürümü: CSS3

Tarayıcı desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek