Embedded Files
Hazırlayan : ABD ALRAZAK KHALED_22430070907
Box Model Nedir ?
HTML ve CSS kullanarak web siteleri oluştururken, kutuların şekillendirilmesi ve yerleştirilmesi çok önemlidir. Bu konuda "Box Model" kavramı, önemli bir yer tutar.
Box Model, HTML'deki her bir öğenin, içerik, dolgu, kenarlık ve kenarlık arasındaki boşluklar gibi dört farklı bölümden oluştuğunu ifade eder.
(Content) (Padding) (Border) (Margin)
Bu kavramlar, CSS kullanarak kutuların boyutlarını, pozisyonlarını, kenarlık ve dolgu özelliklerini kontrol etmek için kullanılır. Örneğin, bir kutunun genişliği ve yüksekliği içeriğinin boyutuna ek olarak, kutunun dolgusu ve kenarlığı da hesaba katılır.
Box Model, web tasarımcılarının kutuların yerleştirilmesi ve şekillendirilmesi hakkında daha iyi bir kontrol sahibi olmalarını sağlar. Bu konuda daha fazla bilgi edinmek için, CSS ve HTML öğrenmeye devam etmenizi öneririm.
Dört ana unsur :
- content : içerik kutusu denir . Bu kutunun genişliği ve yüksekliği şunlara bağlıdır: (metinler, resimler ve diğer öğeler).
- padding : Dipnot özelliği ile tanımlanır . Dipnot genişliği belirtilmezse, dipnotun kenarı içerik kutusunun kenarıyla eşleşir.
- border : frame özelliği ile tanımlanır. Çerçeve genişliği belirtilmezse, çerçeve kutusunun kenarı altbilgi kutusunun kenarıyla aynıdır.
- margin : marj özelliği tarafından tanımlanır . Marj genişliği belirtilmezse, marj kutusu kenarı çerçeve kutusu kenarıyla eşleşir.
Örnek :
Örnek :
div öğesinin genişliği width özelliği ile 300 piksel olarak belirlenmiştir.
padding özelliği, div öğesinin iç kısmındaki dolgu boşluğunu her iki tarafta da 50 piksel olarak ayarlamıştır, bu nedenle div öğesinin genişliği 300 piksel + 50 piksel sol dolgu boşluğu + 50 piksel sağ dolgu boşluğu = 400 piksel olur.
border özelliği, div öğesinin etrafındaki kenarlık kalınlığını 10 piksel olarak ayarlar. Kenarlıklar, kutunun dört kenarının her biri boyunca, içeriğin etrafında bulunur. Dolayısıyla, öğenin genişliği 400 piksel + 10 piksel sol kenarlık + 10 piksel sağ kenarlık = 420 piksel olacaktır.
Sonuç olarak, div öğesi toplamda 420 piksel genişliğinde olacaktır.
Box model önemli mi ?
Box model aynı zamanda web sayfalarının uyumlu ve tutarlı bir şekilde görüntülenmesini sağlamak için de önemlidir.
Farklı tarayıcılar ve cihazlar, öğelerin boyutlarını ve yerleşimini farklı şekillerde yorumlayabilirler. Box model web
tasarımcılarına öğelerin boyutlarını ve yerleşimini tutarlı bir şekilde belirleyerek, web sayfalarının farklı cihazlarda ve
tarayıcılarda doğru şekilde görüntülenmesini sağlama konusunda yardımcı olur .
Page updated
Report abuse