CSS3 Kutusu Boyutlandırma
CSS3 box-sizing özelliği bize bir elemanın toplam genişliği ve yüksekliği dolgu ve sınır dahil sağlar.
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit- veya -moz- bir önek ile çalıştığım ilk versiyonunu belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
CSS3 olmadan box-sizing Mülkiyet
Varsayılan olarak, bir elemanın genişliği ve yüksekliği, şu şekilde hesaplanır:
Bir elemanın genişlik + dolgu + Sınır = gerçek genişliği
yüksekliği + dolgu + Sınır = bir elementin gerçek yükseklik
Bunun anlamı şudur: Eğer bir elementin genişlik / yükseklik ayarlandığında, eleman genellikle ayarladığınız daha büyük görünür (because the element's border and padding are added to the element's specified width/height) .
Aşağıdaki şekilde, iki göstermektedir <div> aynı belirtilen genişliğe ve yüksekliğe sahip elemanlar:
İki <div> sonucunda farklı boyutları ile sona kadar yukarıdaki elemanların (DIV2 için bir doldurma belirlemiştir):
Örnek
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Kendin dene " Onlar dolgu ve sınırları dışarı çıkarmak zorunda kaldı, çünkü Yani, uzun süre web geliştiricileri, istedikleri daha küçük genişlik değeri belirttiniz.
CSS3 ile, box-sizing özelliği bu sorunu çözer.
CSS3 ile box-sizing Mülkiyet
CSS3 box-sizing özelliği bize bir elemanın toplam genişliği ve yüksekliği dolgu ve sınır dahil sağlar.
Eğer ayarlarsanız box-sizing: border-box; bir eleman dolgu ve sınır genişliği ve yüksekliği dahildir:
Burada Aynı örnek, yukarıda tanımlandığı gibi bir box-sizing: border-box; Her iki ilave <div> elemanlarının:
Örnek
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} Kendin dene " Kullanmanın sonucu bu yana box-sizing: border-box; çok daha iyi, pek çok geliştirici bu şekilde çalışması için onların sayfalarındaki tüm unsurları istiyorum.
Aşağıdaki kod tüm unsurları bu daha sezgisel bir şekilde boy olmasını sağlar. Birçok tarayıcı zaten kullanmakta box-sizing: border-box; (-:% 100 girişleri ve metin alanları genişliği farklı bir nokta neden olmayan tüm ama;) çok sayıda kalıp elemanları için.
tüm öğelere bu uygulama güvenli ve akıllıca: