Bu yazımızda, CSS "kutu modelini"(box-model) inceleyeceğiz. HTML içinde tanımladığımız her bir elemanı kutu olarak düşünebiliriz.
Bu model HTML bileşenlerinin etrafını saran margin(kenarlara mesafe), padding(boşluk), border(sınır/kenar) ve content(içerik)'ten oluşmaktadır.
HTML yapısı:
<!DOCTYPE html lang="tr"> /*burada dil tanımlaması olarak "tr" yani Türkçe seçtik*/
<head>
<meta charset="utf-8"/>
<title>lang özelliği</title>
<style type="text/css">
div {
background-color:#0094ff;
width:150px;
padding:25px;
border:10px solid gray;
margin:15px;
}
</style>
</head>
<body>
<div>İçerik alanı</div>
</body>
</html>
Fig.1 kutu modeli:
Açıklamalar:
Yukarıdaki örnekte görüldüğü gibi kutu modelinde kullandığımız bazı özellikler şunlardır:
- "margin": Elementin dış boşluğunu ayarlamak için kullanılır.
- "padding": Elementin iç boşluğudur. Bu boyut arttıkça elementimizin de boyutu artmaktadır.
- "border": Çerçevemizin kenar kalınlığıdır. Örneğimizde gri renk ve 10 piksellik bir değer verilmiştir.
Bu değerleri istediğimiz şekilde ayarlayabilir ve değişiklikler yapabiliriz.
Margin Özelliği Birden Fazla Parametre Kullanımı
"margin" özelliğine tek parametre verildiğinde bütün kenarlara eşit oranda dış boşluk verilmiş olur.
Birden fazla parametre verildiğinde ise farklı değerler uygulanabilir.
Her parametre, elementin üstünden(top) başlayarak, sağa(right), alta(bottom) ve sola(left) değer olarak yansır:
Dört parametre uygulandığında aşağıdaki yapı karşımıza çıkar.
Üç parametre uygulandığında aşağıdaki yapı karşımıza çıkar.
İki parametre aldığında ise aşağıdaki gibi yapı karşımıza çıkar.
Margin ile Ortalama
"margin" özelliğinin "auto" değeri dış boşlukları otomatik ayarlar. Web sayfasının tarayıcı ekranında ortalanarak gösterilmesini istediğimiz
durumlarda, sağ ve sol margin özelliğine auto değeri vermemiz yeterli olur.
.ortala{margin: 20px auto;}
Açıklama: Örneğimizde üst ve alt boşlukları 20px olarak belirledik. Sağ ve sol boşlukları ise "auto" özelliği vererek sayfanın ortalanmasını sağladık.
Padding
İç boşluk demektir. Bir elementin iç kenar boşluğunu ayarlamak için kullanılır. 4 ayrı şekilde kullanılabilir.
padding:10px; /*üst,sağ,alt,sol değerlerin tamamını kapsar*/
padding:5px 15px 8px 20px; /*ilk değer üst,sonra sağ, sonra alt ve en son sol değeri ayarlar*/
padding:5px 20px 10px; /*ilk değer üst, ikinci değer sağ ve sol, üçüncü değer ise alt değeri ayarlar.*/
padding:10px 20px; /*ilk değer üst ve alt, ikinci değer ise sağ ve sol değerleri ayarlar.*/
Overflow
Blok düzey elementlerde içeriğin kendi dışına taşmasına overflow denir. Taşmayı kontrol etmek için overflow özelliğinden yararlanılır.
Aşağıdaki değerleri alır;
- "visible": Varsayılan değerdir, taşan içerik gösterilir.
- "hidden": Taşan içerik gizlenir.
- "scroll": Taşan kısım bir çerçeve içerisine alınır ve kaydırma çubukları gösterilir.
- "auto": İçerik taşma sınırı değerlerine ulaştığında kaydırma çubukları gösterilir.
overflow: hidden;
overflow: scrool;
overflow: auto;
Kutu Modelini Kaydırma
Float
Kutu modelini temsil eden elementi bulunduğu konumdan kaydırır. Aşağıdaki özellikleri alır;
float:left; /*sola hizalar*/
float:right; /*sağa hizalar*/
float:top; /*üste doğru hizalar*/
float:bottom; /*alta doğru hizalar*/
float:start; /*elementi sola kaydırır ve left ya da top özelliği gösterir.*/
float:end; /*elementi sağa kaydırır, right ya da bottom özelliği gösterir.*/
float:none: /*Kaydırma özelliğini iptal eder.*/
Clear
Float ile kaydırılmış bir blok başka bir blok ile yan yana gelince kenarları bir birine değer. Yani her iki blok
aynı konumda hizalanır. Bu iki bloğun aynı konumda hizalanmasını istemediğimiz durumlarda "clear" özelliği kullanılır.
Birinci kutudan dolayı hizalanmış ikinci kutunun kenarı ile bitişik olmayacaksa o kenara "clear" özelliği ve alacağı değer verilir.
Clear özelliği aşağıdaki değerleri alır.
clear:left; /*Atandığı blok elementin üst sınırını daha önce left ile kaydırılan kutunun alt sınırında olmasını sağlar.*/
clear:right; /*Atandığı blok elementi daha önce right ile kaydırılan kutudan uzaklaştırılmasını sağlar.*/
clear:top; /*Atandığı blok elementin üst sınırını daha önce top ile kaydırılan kutunun alt sınırında olmasını sağlar*/
clear:bottom; /*Atandığı blok elementi daha önce bottom ile kaydırılan kutudan uzaklaştırılmasını sağlar.*/
clear:both; /*Atandığı blok elementi daha önce left,top veya right,bottom ile kaydırılan kutudan uzak tutulur.*/
clear:none; /*Oluşan kutunun daha önce kaydırılan kutularla bir ilgisi olmaz.*/
Visibility
Elementlerin gizlenmesi ve gösterilmesi ile ilgili bir özelliktir. 4 değer alır;
visibility:none; /*element gösterilmez*/
visibility:visible; /*element gösterilir*/
visibility:hidden; /*element gizlenir ve yerine boş bir dikdörtgen gelir*/
visibility:collapse; /*hidden ile aynı özelliktedir.Sadece IE tarafından desteklenmemektedir.*/
Box-Sizing
Border değerlerini hesaba katmadan kutunun boyutunu ayarlamak için kullanılır. İki özelliği vardır;
- "content-box": Kutu genişliği ve yüksekliğinde border ve padding değerleri dikkate alınmaz ve kutunun genişliği ya da yüksekliği "içerik+border+padding" toplamı kadar olur.
- "border-box": Kutu genişliği ve yüksekliği border ve padding değerleri kadar olur. Kutunun genişliği yada yüksekliğine border ve padding değerleri dahil edilir.
CSS Yapısı:
box-sizing:content-box;
box-sizing:border-box;
Kolay gelsin, görüşmek üzere...
