Css Box Sizing - Css Dersleri

[VexraDev]

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.

<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.

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.

* {
    box-sizing: border-box;
}