Örnek
Olduğunu belirtin <div> elemanlar dolgu ve sınır elementin toplam genişlik ve yükseklik dahil olmalıdır:
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
Kutu boyutlandırma özelliği boyutlandırma özelliklerinin Hangi tarayıcıları anlatmak için kullanılır (width and height) içermelidir.
Onlar sınır kutusu eklemeli miyim? Ya da sadece içerik kutusu (genişlik ve yükseklik özelliklerinin varsayılan değer olan)?
| Varsayılan değer: | content-box |
|---|---|
| Miras: | no |
| canlandırılabilir: | no. Read about animatable |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.boxSizing="border-box" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -moz-.
| özellik | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4,0 -webkit- | 8 | 29.0 2.0 -moz- | 5.1 3.2 -webkit- | 9.5 |
CSS sözdizimi
box-sizing: content-box|border-box|initial|inherit;Mülkiyet Değerler
| değer | Açıklama |
|---|---|
| content-box | Varsayılan. Genişlik ve yükseklik özellikleri (and min/max properties) , sadece içeriği de kapsar. Sınır, dolgu veya marjı dahil değildir |
| border-box | Genişlik ve yükseklik özellikleri (and min/max properties) kenar içeriği, dolgu ve sınır ancak içerir |
| initial | varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun |
| inherit | üst öğesinden bu özelliği devralır. Yaklaşık miras oku |
Diğer Örnekler
Örnek
Yan yana iki sınırlanmıştır kutuları yan belirtin:
div
{
box-sizing: border-box;
width: 50%;
float: left;
}
Kendin dene " İlgili Sayfalar
CSS3 öğretici: CSS3 Box Boyutlandırma
HTML DOM referansı: boxSizing property