Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Hayat Kurtaran CSS Kodu: Box-Sizing Nedir? Ne İşe Yarar?


FacebookTwitterPinterestTumblrYazdır


Hayat Kurtaran CSS Kodu: Box-Sizing Nedir? Ne İşe Yarar?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.

Hayat Kurtaran CSS Kodu: Box-Sizing Nedir? Ne İşe Yarar?

AYRICA: Embed ve Object Videoları CSS ile Responsive Yapalım

Hayat Kurtaran CSS Kodu: Box-Sizing Nedir? Ne İşe Yarar?

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.

.ornekdiv {
width:200px;
height:200px;
padding:15px;
border:1px solid #ccc;
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. Faydalı olmasını diliyorum.

  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri