CSS Kutu Modeli Özellikleri ve Çalışma Prensipleri

 

Kutu Modeli Özellikleri ve Çalışma Prensipleri

 

Kutu modeli 4 ana ögeden oluşur.

·        margin: kenar dışı boşluğu

·        border: kenar kalınlığı

·        Padding: kenar içi boşluğu

·        içerik: ( content: Bizim tarafımızdan belirtilen metinler, görseller vs. yer alır.)

Görünüm Ayarları

Web sayfasını oluşturan elemanlar sayfaya yerleşimlerine göre ikiye ayrılır.

 

Satır İçi Seviyesi Elemanlar(inline): Satıra yan yana eklenir. Aynı satırda önünde veya sonunda ele­man bulunabilir.

 

Blok Seviyesi Elemanlar(block): Sayfaya alt alta eklenir, aynı satırda yanında başka bir eleman bulun­maz.

 

inline elemanlar	Block elemanlar	inline-block elemanlar
İnline etiketler: span, a, b, input, img, label, strong, textarea …   - Kendi başlarına bir satıra yerleşmezler, sadece bulunduğu yeri kaplar. Yanına eleman gelebilir. -Genişlik yükseklik ayarı yapılamaz.   Float left veya right değeri aldıklarında otomatik olarak block düzeyinde element olurlar	Block etiketler: h1, p, li, div, ul , table   -Bulunduğu satırı komple kaplar   Genişlik yükseklik verilir alt alta yerleşir.	-Sayfada akışı yanyana olur.   -Genişlik ve yükseklik değerleri verilebilir.

 

Display: Genel olarak elemanların yerleşim seviyesini, sayfada görünüp görünmeyeceğini be­lirlemek için kullanılan stil kodudur.

CSS Kodu ve Kullanımı	Açıklama
display:none	Elemanın sayfada görünmez olmasını sağlar. Eleman sayfada herhangi bir yer kaplamaz.
display:inline	Elemanın satır içi seviyesinde davranmasını sağlar.
display:block	Elemanın blok seviyesinde davranmasını sağlar.
display:inline-block	Elemanın hem satır içi hem de blok seviyesinde davranmasını sağlar. Karma bir yerleşim seviyesidir. Elemanlar satır seviye­sindeki gibi yan yana yerleşir. Blok seviyesindeki gibi genişlik, yükseklik, metin hizalama vb. kodlar kullanılabilir.

 

Float: Bir elemanın, sayfanın normal akışı dışında sola veya sağa kaydırılarak konumlandırılma­sı için kullanılan stil komutudur. Sayfanın normal yerleşim akışı değişir fakat diğer elemanlar so­la veya sağa kaydırılmış nesnenin etrafını sardıktan sonra sayfa, normal yerleşim akışına devam eder.

CSS Kodu ve Kullanımı	Açıklama
float:left ;	Elemanı sayfa akışını bozarak sola kaydırır.
float:right ;	Elemanı sayfa akışını bozarak sağa kaydırır.
float:none ;	Varsayılan olarak her elemanın float elemanın float özelliği değeri “none”’dır. Herhangi bir sağa, sola kaydırma işlemi yapılmayacağını belirtir.

 

Clear: Float özelliği kullanılmış bir nesneden sonra clear özelliği kullanılmış bir nesne ekleye­rek sayfanın normal yerleşim akışına devam etmesi sağlanır.

CSS Kodu ve Kullanımı	Açıklama
clear:left ;	float:left komutunun etkisini kaldırır.
clear:right ;	float:right komutunun etkisini kaldırır.
clear:both ;	Hem float:left hem de float:right komutunun etkilerini kaldırır.