CSS Display özelliği

Merhabalar bugünki yazımızda CSS ile tasarım yaparken sık olarak kullandığımız display özelliğinden bahsedeceğim

Biliyoruz ki CSS ile bazı elemanları gizleyebiliyoruz , bir blok gibi davranmasını sağlayabiliyoruz , ya da satır içerisinde yan yana gelmesini de sağlayabiliyoruz. Peki bu işlemleri ne kullanarak yapıyoruz ? tabii ki display özelliği sayesinde

Display özelliği üç farklı değer alır bunların şöyle sıralanır;

• Block (Blok)
• Inline (Satır içi)
• Inline Block (Hem satırn içi aynı zaman da blok özelliklerini alır )

Bunların dışında display özelliği none olarak da belirlenebilir bu özellik ile eleman yok olur ve yer kaplamaz.

Html Elemanları Display Seviyeleri

Html ile elemanların varsayılan olarak belirli display özellikleri gelir, bunlar elemanlara göre değişiklik gösterir. Örnek vermek gerekirse bir <div> elemanının display özelliği block olarak varsayılmıştır, 
bununla beraber bir <span> elemanının display özelliği ise inline dır.

Blok Seviyesinde Elemanlar

Blok seviyesi elemanlar tüm satırı kaplarlar yani yanlarına bir eleman getirilmek istenirse bu eleman alt satıra geçmek zorundadır.
HTML ile varsayılan olarak display özelliği block belirlenmiş elemanlar

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Satır-içi (Inline) Elemanlar 

Inline seviyesi elemanlar sadece içerikleri kadar alan kaplarlar bu nedenle yanlarına eleman getirilebilir.
HTML ile varsayılan olarak display özelli inline belirlenmiş elemanlar

• <span>
• <a>
• <img>

Display None

Bazı elemanları html sayfamızdan kaybetmek isteyebiliriz , bu gibi durumlarda elemanın display özelliğini none olarak belirlersek eleman sayfada görünmez
ve aynı zamanda kapladığı yerde yok olur artık sayfada  yer teşkil etmez.
HTML de sabit olarak display özelliği none olarak ne gelir diye sorarsanız <script> ve <style> gibi etiketler gözükmezler ve dispay özellikleri none olarak belirlenmiştir.
 

Elemanların varsayılan display özelliklerini değiştirme:

Bazı durumlarda elemanların display özelliklerini değiştirmek isteyebiliriz. Örneğin satır içi olan bir <span> etiketinin display özelliğini block yapmak isteyebiliriz. Örnek vermek gerekirse.
 

span{
    background-color:red;
	width: 400px;
	height: 400px;
}

İçerisinde merhaba yazan bu spanın arkaplan rengini kırmızı yapınca kapladığı alanı anlayabiliyoruz. Span satırı içi bir eleman olduğu için genişlik ve yükseklik değerleri işlemeyecektir. Görüntü şu şekildedir.
Merhaba
Biz gelip burada display özelliğini eğer block olarak değiştirirsek bu genişlik ve yükseklik değeri artık işleyecektir.
 

span{
	background-color:red;
	width: 400px;
	height: 400px;
	display: block; /* Bu kod block yapar */
}

Display özelliğini block yaptıktan sonra oluşan değer aşağıdaki gibidir.
Gördüğümüz gibi bu şekilde diğer elemanların da display özelliklerini istediğimiz gibi değiştirebiliriz, örnekler çoğaltılabilir ama hayal gücünüzü kısıtlamak istemiyorum bu işler deneme ve yanılma ile olur , sizler de kendi mantığınıza ve hayal gücünüze göre diğer elemanların display özelliklerini deneyerek öğrenebilir ve aynı zamanda üzerlerinde değişiklikler yapabilirsiniz. 
Saygılar...