- Katılım
- 29 Haz 2019
- Konular
- 482
- Mesajlar
- 2,156
- Çözüm
- 182
- Reaksiyon Skoru
- 1,087
- Altın Konu
- 0
- TM Yaşı
- 6 Yıl 11 Ay 14 Gün
- Başarım Puanı
- 212
- MmoLira
- 2,582
- DevLira
- 33
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
Css box sizing nedir ve ne amaçla kullanılır ? box-sizing:border-box kullanımı nasıldır ?
Bir nesnenin kapladığı alan nesnenin genişliği + padding + border değerlerinin toplamıdır.
Örneğin 2 tane <div>' in padding haricinde tüm özellikleri aynı olsun.
Ancak örnekte görüldüğü gibi div' lerin kapladığı alan birbirinden farklıdır. Çünkü bir nesneye verdiğimiz genişlik ya da yükseklikten başka bir de padding ve border değerlerini işin içine katmamız gerekiyor ki; nesnenin kapladığı toplam alanı bulalım.
Bu durum çoğu zaman uğraşılması zor bir durum olarak algılanır ve bu duruma çözüm olarak box-sizing:border-box özelliği yardımımıza koşar. Yani nesnelerin kapladığı alanı bulmak için padding ve border genişlikleriyle uğraşmak zorunda değiliz.
Yukarıdaki örnekte tek değiştirmemiz gereken alan <div> lerin box-sizing özelliğini border-box yapmak olacaktır.
div etiketleri için uyguladığımız box-sizing:border-box özelliğinden dolayı padding ve border değerlerinin kapladığı alan hesaba katılmaz ve nesnelerin kapladığı alan sadece verdiğimiz genişlik kadar olacaktır.
Yani div için verdiğimiz genişlik+border+padding = 400px olacaktır.
Sadece div etiketlerine box-sizing:border-box vermek yerine sayfanın en başında * ile tüm etiketlere ulaşıp bu değeri vermek içinizi oldukça kolaylaştıracaktır.
Bir nesnenin kapladığı alan nesnenin genişliği + padding + border değerlerinin toplamıdır.
Örneğin 2 tane <div>' in padding haricinde tüm özellikleri aynı olsun.
Kod:
<div id="red">
</div>
<div id="blue">
</div>
div{
margin:10px;
}
#red {
width:400px;
height:50px;
border:1px solid red;
}
#blue {
width:400px;
height:50px;
border:1px solid blue;
padding:20px;
}Ancak örnekte görüldüğü gibi div' lerin kapladığı alan birbirinden farklıdır. Çünkü bir nesneye verdiğimiz genişlik ya da yükseklikten başka bir de padding ve border değerlerini işin içine katmamız gerekiyor ki; nesnenin kapladığı toplam alanı bulalım.
Bu durum çoğu zaman uğraşılması zor bir durum olarak algılanır ve bu duruma çözüm olarak box-sizing:border-box özelliği yardımımıza koşar. Yani nesnelerin kapladığı alanı bulmak için padding ve border genişlikleriyle uğraşmak zorunda değiliz.
Yukarıdaki örnekte tek değiştirmemiz gereken alan <div> lerin box-sizing özelliğini border-box yapmak olacaktır.
Kod:
div{
margin:10px;
box-sizing:border-box;
}div etiketleri için uyguladığımız box-sizing:border-box özelliğinden dolayı padding ve border değerlerinin kapladığı alan hesaba katılmaz ve nesnelerin kapladığı alan sadece verdiğimiz genişlik kadar olacaktır.
Yani div için verdiğimiz genişlik+border+padding = 400px olacaktır.
Sadece div etiketlerine box-sizing:border-box vermek yerine sayfanın en başında * ile tüm etiketlere ulaşıp bu değeri vermek içinizi oldukça kolaylaştıracaktır.
Kod:
* {
box-sizing: border-box;
}
Son düzenleme: