CSS KUTU(BOX) MODELİ

Tablosuz tasarımların gereklilik kazandığı günümüzde, bu iş için esas etiketimiz olan "<div>" etiketi, kutu modeli (box model) oluşturulurken de esas etiket konumundadır.

Div etiketleri sayesinde, istediğimiz kutu modellerini gerçekleştirebiliyoruz. Ayrıca istediğimiz öğenin etrafını istediğimiz biçimde sarabiliyoruz. Bu kutuların kendi içlerinde ve kendi aralarında ki düzenini stil şablonları uygulayarak ayarlayabiliyoruz.

Kutu modeli dört ana öğeden oluşur.

Aşağıda ki resimde kutu modeli (box-model) görsel olarak gösterilmiştir.


css box model

CSS Genişlik ve Yükseklik Özelliği - Width & Height of an Element


" width " ve " height " ile sadece içeriğin boyutlarını belirlersiniz. Toplam boyut için padding, border ve margin'i de hesaba katmanız gerekir.

Toplam boyutu 300px (piksel) olan bir örneği görelim.

CSS:

.kutu {width: 250px;
       padding: 10px;
       border: 5px solid gray;
       margin: 10px;

Genişliği Hesaplayalım...

250px Width(genişlik)

+ 20px (Sağdan ve Soldan verilen padding'lerden (İç Kenar Boşluğundan) geliyor.)

+ 10px (Sağdan ve Soldan verilen border'dan (Kenar Kalınlığından) geliyor.)

+ 20px (Sağdan ve Soldan verilen margin'lerden (Dış Kenar Boşluğundan) geliyor.)

= 300px

Sadece 250px alanı olduğunu varsayalım. Eni 250px toplam genişliği ile bir öğe yapalım:

CSS:

.kutu{width: 220px;
      padding: 10px;
      border: 5px solid gray;
      margin: 0px;

Bir elemanın toplam genişliği hep böyle hesaplanmalıdır;

Toplam eleman genişliği = width + sağ padding + sol padding + sağ border + sol border + sağ margin + sol margin .

Bir elemanın toplam yüksekliği hep böyle hesaplanmalıdır;

Toplam eleman yüksekliği = height + üst padding + alt padding + üst border + alt border + üst margin + alt margin .

ÖRNEK KUTU:

CSS:

.kutu{width: 220px;
      height:200px;
      border: 5px solid #000;
      background-color:#ff6600;

HTML:


ÇIKTI:

css box model

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

4265

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.