Pozisyonlandırma Özellikleri:
- CSS Position özelliği, bir elementin bir sayfa içerisinde nasıl konumlandırılacağını belirler. (relative, absolute, fixed gibi).
- top, bottom, left, right: Pozisyonu ayarlamak için kullanılır.
Box Model Özellikleri:
CSS Box Model
CSS Box Model, her HTML elementinin bir kutu olarak düşünüldüğü bir kavramdır. Bu kutu, dört ana bileşenden oluşur:
- Content (İçerik): Elementin içeriği. Örneğin, bir paragrafın metni veya bir resim.
- Padding (Dolgu): İçerik ile kenarlık (border) arasındaki boşluk.
- Border (Kenarlık): Padding ile margin arasındaki kenarlık. Bu, kutunun çevresindeki çerçevedir.
- Margin (Dış Boşluk): Kenarlık ile bir sonraki eleman arasındaki boşluk.
Bu bileşenler, kutunun boyutunu ve etrafındaki diğer elementlerle olan ilişkisini belirler.
- width: Bir elementin genişliğini belirler.
- height: Bir elementin yüksekliğini belirler.
- border: Bir elementin sınırını belirler.
- border-radius: Bir elementin köşe yuvarlaklığını belirler.
Ne İşe Yararlar?
- Box Model: Elementlerin boyutlarını ve etrafındaki boşlukları kontrol etmek için kullanılır. Web sayfasının düzenini oluştururken, elementlerin birbirleriyle olan ilişkilerini belirlemek için çok önemlidir.
- Pozisyonlandırma: Elementlerin sayfa içerisindeki yerleşimini kontrol etmek için kullanılır. Belirli bir elemanın sayfadaki konumunu belirlemek veya dinamik sayfa düzenleri oluşturmak için gereklidir.
Bu iki kavram, bir web sayfasının düzenini ve stilini kontrol etmenin temel taşlarıdır ve web tasarımında büyük bir rol oynarlar.