CSS'in en güzel yanı, birçok açıdan bizlere kolaylık sağlamasıdır.
Bu bağlamda bazı CSS kodlarının çok ama çok önemli olduğunu anlıyoruz, bilhassa
Responsive tasarım kodlar iken... Sizlere "
box-sizing nedir?" şeklinde bir soru sormak istiyorum.
Belki birçok CSS uzmanının bildiği bir kod ancak bilmeyenler için çok faydalı olacağına inanıyorum. Bir
width ve
height değerine eklenen
padding ve
border değerleri, genişliğimizi ve yüksekliğimizi tekrar artırır.
Ancak
"box-sizing" kodu ile bu değerlerin
width ve
height değerlerine ait olmasını sağlayabiliriz. Gerçekten de, mükemmel değil mi? Yani
Responsive bir tasarım kodlar iken, örnek
div'in ekrandan geniş olmaması adına
border-box kodunu kullanmanız yeterli olacaktır.
Örnek kullanımı ise aşağıdadır.
Kod
.ornekdiv {
width:200px;
height:200px;
padding:15px;
border:1px solid [Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
box-sizing:border-box;
} SONUÇ: Yukarıdaki kırmızı renkli kod ile birlikte,
padding ve
border değerleri, mevcut olan
width ve
height değerlerine dahil edildi. Bu şekilde ise örnek
div'in de ekrandan taşması engellenmiş oldu.