Hizmetlerimiz hakkında bilgi almak için tıklayın.
CSS kutu modelleri, web sayfalarının temel bileşenlerinden biridir. Kutu modelleri, her HTML öğesinin içeriğini, kenar boşluklarını, çerçevelerini ve dolgusunu tanımlar. Bu, sayfanın görüntüsünü ve düzenini belirlemek için kullanılır. Bu makalede CSS kutu modelleri hakkında temel bilgiler ve örnekler yer almaktadır.
CSS kutu modelleri, özellikle web tasarımında, görüntüleme ve düzenleme işlevleri için çok önemlidir. Sayfaların kenar boşlukları, çerçeveleri ve dolguları, sayfanın okunabilirliği ve kullanılabilirliği açısından önemli bir rol oynar. CSS kutu modelleri, HTML öğelerinin boyutunu ve yerleşimini belirleyerek, sayfanın görünüşünü ve davranışını yönlendirir.
CSS kutu modelleri, her HTML öğesi için dört temel özellik içerir: içerik, dolgu, kenar boşluğu ve çerçeve. İçerik, öğenin görüntüsünü oluşturan gerçek içeriği temsil eder. Dolgu, içerik etrafında boşluk bırakır ve kenar boşluğundan önce gelir. Kenar boşluğu, öğenin ve kenar çerçevesinin arasındaki boşluktur. Çerçeve, öğenin görüntüsünü çevreleyen dört kenarlı bir çerçeveyi ifade eder.
Kutular, genellikle sıfır veya daha fazla kenar boşluğu, dolgu ve çerçeveyle oluşturulan dikdörtgen şekillerdir. Kutular başka bir kutu içinde yer alabilir ve kutuların içeriği diğer öğeler de olabilir. CSS kutu modelleri, öğelerin boyutlarını ve görünüşlerini kontrol etmek için kullanılır.
CSS kutu modelleri, genişliği, yüksekliği, boyutu ve konumu belirleyen bir dizi özellikte tanımlanır. Bu özellikler, genellikle CSS'in belirli bir özelliği olan kutulara özgüdür.
-
content: Metin ve resimlerin göründüğü kutunun içeriğidir. padding: İçeriğin etrafındaki bir alanı temizler. Dolgu şeffaftır.margin: Sınırın dışındaki bir alanı temizler. Kenar boşluğu şeffaftır.border: Dolgu ve içeriğin etrafından geçen bir kenarlıktır.
Örnek:
div {
background-color: white;
width: 300px;
border: 15px solid black;
padding: 50px;
margin: 20px;
}
HTML Kodu:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: white;
width: 300px;
border: 15px solid black;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>Bu bir kutu örneğidir.</div>
</body>
</html>
Görünüm:
GENİŞLİK VE YÜKSEKLİĞE GÖRE KUTU
Bir elemanın genişliğini ve yüksekliğini tüm tarayıcılarda doğru bir şekilde ayarlamak için kutu modelinin nasıl çalıştığını bilmeniz gerekir.
Önemli: Bir elemanın genişlik ve yükseklik özelliklerini CSS ile ayarladığınızda, sadece içerik alanının genişlik ve yüksekliğini ayarlarsınız. Bir öğenin tam boyutunu hesaplamak için dolgu, kenarlıklar ve kenar boşlukları da eklemelisiniz.
Örneğin bir 350px'e sahip bir div oluşturalım.
//Bu <div> öğesinin toplam genişliği 350px olacaktır://
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Şimdi biraz matematik;
350px oluşturmak istediğimiz div'e genişlik olarak 320px verdik.
padding'e 10px tanımladık. sağ ve sol padding 10px'ten toplamları 20px'e denk gelecek.
border'e ise 5px tanımladık. sağ ve sol border 5px'ten toplamları 10px'e denk gelecek.
ve toplamında 350px'e ulaşmış olacağız, bu sayede tüm tarayıcılarda doğru ayarlayabiliriz.
Eğer yükseklikte 350px vermiş olsaydık, üst ve alt px toplamlarını alacaktık.
Hesaplamalar şu şekilde;
Toplam element genişliği = width + left padding + right padding + left border + right border + left margin + right margin
Toplam element yüksekliği = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Toplam Genişlik</h2>
<img src="resim.jpg" width="350" height="263" alt="resim">
<div>Yukarıdaki resim 350px genişliğindedir. Bu öğenin toplam genişliği de 350 pikseldir.</div>
</body>
</html>
Sonuç olarak, CSS kutu modelleri web sayfalarının temel bileşenlerinden biridir ve sayfanın görünümünü ve düzenini belirleyen önemli bir rol oynar. Bu makalede, doğru şekilde kullanıldığında CSS kutu modellerinin nasıl kullanılabileceğine dair örnekler verildi. Web sitelerinizdeki kutuların boyutu, özellikleri ve konumu hakkında daha fazla bilgi edinmek ve web sitenizi optimize etmek için bu konu hakkında daha fazla araştırma yapmanız önerilir.
