Display Özelliği
Html etiketleri inline ve blok elemanlar olmak üzere ikiye ayrılırlar.
Blok elemanlar sayfa içerisinde alt alta yerleşirler. Yani o elemandan sonraki etiketler alt satırdan devam ederler. Örneğin h1-h6, p, div gibi etiketler block türündedir ve bu etiketlerden sonra gelen içerik alttan devam eder.
İnline elemanlar ise satır içinde yerleştirilirler. Örneğin b, i, u, a, font, img gibi etiketler, aynı satırdan yerleşime devam ederler.
İstenilen etiketlerin bu özellikleri display özelliği kullanılarak değiştirilebilir:
display:block;
display:inline;
display:inline-block;
Önemli Bilgi: Inline türdeki etiketler için width ve height özellikleri kullanılamaz. Inline türündeki bir etikete css ile genişlik veya yükseklik vermek istiyorsak o etiketi block türüne çevirmeliyiz.
Inline-Block özelliği ise bir etiketin hem satır içinde yerleşmesine hem de width ve height özelliği verilebilmesine olanak sağlar.
Block türündeki elemanları yan yana yerleştirmek için float özelliği, sonrasında yerleşimin normale dönmesi içinse clear özelliği kullanılmaktadır. Yan yana yerleşmesini istediğimiz etiketleri inline-block şekline dönüştürürsek float ve clear özelliklerini kullanmamıza da gerek kalmayacaktır.
Float ve clear özelliklerini sonraki konumuzda bulabilirsiniz.
Display:none; şeklinde kullandığımızda ise html elemanlarının sayfada gizlenmesini sağlayabiliriz. Bu özelliğin uygulandığı eleman silinmiş olmaz, sayfada gizlenir ve hiç yer kaplamaz.
Visibility: hidden; şeklinde de istenen elemanların görünmemesini sağlayabiliriz. Ancak bu yöntemde html elemanı sayfada görünmese de yer kaplamaya devam edecektir.
css display özelliği ne işe yarar, display özelliği kullanımı ve örnekleri, html block elemanları inline yapma, inline-block nedir, display none ile visibility hidden farkı
KONU İLE İLGİLİ ÖRNEKLER
|
Display:none ve visibility:hidden arasındaki fark
|
Kendin Dene
|
9180 kez okundu.