Css kutusu modeli

CSS'deki kutu modeli, HTML öğelerinden oluşturulan kutuları tanımlar. Kutu şablonu ayrıca her öğe için kenar boşlukları, kenarlıklar, dolgu ve içerik ayarlamak için ayrıntılı seçenekler içerir. Aşağıdaki resim kutu modelinin nasıl oluşturulduğunu göstermektedir.
Kutu modeli veya "kutu modeli", tüm web sayfalarının tasarımını belirlediğinden, CSS stil sayfası dilinin kesinlikle en önemli özelliğidir. Kutu modeli, sayfalardaki tüm öğelerin dikdörtgen kutularla temsil edilmesine neden olan CSS davranışıdır.
Tek sayfalık kutular otomatik olarak oluşturulur. Her HTML etiketi eklendiğinde, o öğenin içeriğini kapsayan yeni bir dikdörtgen kutu oluşturulur. Aşağıdaki resim, sayfanın içerdiği üç HTML etiketini oluşturan üç dikdörtgen kutuyu göstermektedir.

Gerçekte, bir web sitesinin tüm öğeleri (paragraflar, bağlantılar, resimler, tablolar vb.) dikdörtgen kutulardır. Tarayıcılar, bu kutuları, sayfanın yerleşimi için belirttiğimiz şekilde yerleştirir.
İki tür kutu vardır: blok ve satır içi. Blok öğeleri, düzen akışını bozar. Yani, "satır sonları" ekleyerek tek başlarına görünürler. Satır içi öğeler akışı takip eder ve blok öğeleri içinde bulunur.
Örneğin, bir paragraf bir blok öğesi olacaktır (yan yana bir paragrafımız olamaz, ancak arka arkaya iki paragraf alt alta görünecektir. Öte yandan, bir bağlantı satır içi bir öğedir, çünkü içinde olduğu metni "kesin".
Her bir kutuyu oluşturan parçalar ve kullanıcının bakış açısından bunların görüntülenme sırası aşağıdaki gibidir:
İçerik (içerik): öğenin HTML içeriğidir (bir paragraftaki kelimeler, bir resim, bir öğe listesindeki metin, vb.)
Dolgu malzemesi: İçerik ve kenarlık arasında isteğe bağlı boş alan.
Sınır: içeriği ve dolgusunu tamamen çevreleyen çizgi.
Arka plan görüntüsü: İçeriğin ve dolgu alanının arkasında görüntülenen resim.
Arka plan rengi: içeriğin ve dolgu alanının arkasında görüntülenen renk.
Kenar boşluğu (marj): kutu ve diğer bitişik kutular arasında isteğe bağlı ayırma.
Dolgu ve kenar boşluğu saydamdır, bu nedenle dolgu tarafından kaplanan alan arka plan rengini veya görüntüsünü (tanımlanmışsa) gösterir ve kenar boşluğunun kapladığı alan öğe ebeveyninizin arka plan rengini veya görüntüsünü (tanımlanmışsa) gösterir. Hiçbir üst öğenin arka plan rengi veya tanımlanmış resmi yoksa, sayfanın arka plan rengi veya resmi görüntülenir (tanımlanmışsa).
Bir kutu hem rengi hem de arka plan görüntüsünü tanımlarsa, görüntü daha yüksek önceliğe sahiptir ve görüntülenendir. Ancak, arka plan görüntüsü öğe kutusunu tamamen kapatmıyorsa veya görüntünün saydam alanları varsa, arka plan rengi de görüntülenir. Saydam görüntüleri ve arka plan renklerini birleştirerek çok ilginç grafik efektleri elde edilebilir.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.