CSS Kutu Boyutlandırma
CSS Kutu Boyutlandırma
CSS box-sizing
özelliği, bir öğenin toplam genişliğine ve yüksekliğine dolgu ve kenarlık eklememize izin verir.
CSS kutu boyutlandırma Özelliği olmadan
Varsayılan olarak, bir elemanın genişliği ve yüksekliği şu şekilde hesaplanır:
genişlik + dolgu + kenarlık = bir öğenin gerçek genişliği
yükseklik + dolgu + kenarlık = bir öğenin gerçek yüksekliği
Bunun anlamı: Bir öğenin genişliğini/yüksekliğini ayarladığınızda, öğe genellikle ayarladığınızdan daha büyük görünür (çünkü öğenin kenarlığı ve dolgusu öğenin belirtilen genişliğine/yüksekliğine eklenir).
Aşağıdaki çizim, belirtilen aynı genişlik ve yüksekliğe sahip iki <div> öğesini göstermektedir:
Yukarıdaki iki <div> öğesi, sonuçta farklı boyutlara sahip olur (çünkü div2'de bir dolgu belirtilmiş):
Örnek
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
box-sizing
Mülk bu sorunu çözer .
CSS kutu boyutlandırma Özelliği ile
Bu box-sizing
özellik, bir elemanın toplam genişliğine ve yüksekliğine dolgu ve kenarlık eklememizi sağlar.
Bir öğeyi ayarlarsanız box-sizing: border-box;
, genişlik ve yüksekliğe dolgu ve kenarlık eklenir:
box-sizing: border-box;
Her iki <div> öğesine eklenmiş , yukarıdakiyle aynı örnek :
Ö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;
}
Kullanmanın sonucu box-sizing: border-box;
çok daha iyi olduğu için, birçok geliştirici sayfalarındaki tüm öğelerin bu şekilde çalışmasını ister.
Aşağıdaki kod, tüm öğelerin bu daha sezgisel şekilde boyutlandırılmasını sağlar. Pek çok tarayıcı zaten box-sizing: border-box;
birçok form öğesi için kullanıyor (ancak tümü değil - bu nedenle girdiler ve metin alanları genişlikte farklı görünüyor: %100;).
Bunu tüm öğelere uygulamak güvenli ve akıllıcadır:
Örnek
* {
box-sizing: border-box;
}
CSS Kutu Boyutlandırma Özelliği
Property | Description |
---|---|
box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |