CSS3 box-sizing özelliği

Box-sizing özelliği esnek siteler geliştirirken işimize çok yarayan bir özelliktir, responsive tasarımın olmazsa olmazıdır diyebiliriz :) Peki nasıl çalışıyor box-sizing özelliği. 2 farklı değer alır:

border-box: Genişlik değeri padding + border + genişlik değerlerinin toplamıyla belirlenir. Yükseklik için de aynı şeyler geçerlidir. ie7 ve altında çalışmaz. Tarayıcı destekleri için buraya bakınız. Firefox 28 ve öncesinde -moz- , Chrome 9 ve Safari 5 öncesi tarayıcılarda -webkit- önekiyle kullanılabilir.
content-box: Genişlik veya yükseklik değeri belirtilen width veya height değerlerini içerir, border ve padding değerlerini içermez.

O zaman bu özellik nerelerde kullanılır ona bakalım. Yüzdeli değerlerde yan yana gelen içeriklere border ve padding değerleri katılınca kapsayıcı div içine sığmayıp alta düşer. Bu durumda box-sizing özelliği kullanılır.

box-sizing kullanımı

 

 

 

Kaynak:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-sizing2

Bir Cevap Yazın