CSS kutu boyutlandırma Özellik
Örnek
Öğenin toplam genişliğine ve yüksekliğine dolgu ve kenarlık ekleyin:
#example1 {
box-sizing: border-box;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik box-sizing
, bir öğenin genişliğinin ve yüksekliğinin nasıl hesaplandığını tanımlar: dolgu ve kenarlıklar içermeli mi, içermemeli mi.
Varsayılan değer: | içerik kutusu |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.boxSizing="border-box" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit- veya -moz- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
CSS Sözdizimi
box-sizing: content-box|border-box|initial|inherit;
Mülk değerleri
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Kenarlıklı iki kutuyu yan yana belirtin:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Örnek
"Evrensel kutu boyutunu" ayarlayın:
* {
box-sizing: border-box;
}
İlgili Sayfalar
CSS eğitimi: CSS Kutu Boyutlandırma
HTML DOM referansı: boxSizing özelliği