CSS Düzen - display Özelliği

display özniteliği, en önemli CSS özniteliğidir ve düzeni kontrol eder.

display özniteliği

display öznitelik, elementin nasıl ve/veya ne zaman gösterileceğini belirler.

Her HTML elementi, element türüne bağlı olarak, varsayılan bir display değeri içerir. Çoğu elementin varsayılan display değeri: block veya inline.

Görünüm panelini göstermek için tıklayın

Bu panel, varsayılan olarak gizlenmiş olan bir <div> elementi içerir. (display: gizli)

Bu, CSS tarafından stilendirilir ve biz bunu JavaScript ile gösteririz. (Değiştir) display: blok)

Blok element (block element)

Blok elementler her zaman yeni bir satıra başlar ve mevcut genişliği kaplar (mümkün olduğunca sola ve sağa genişler).

Bu <div> elementi blok elementidir.

Blok elementlerin bazı örnekleri:

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

Satır içi element (inline element)

Satır içi elementler yeni bir satıra başlamaz, sadece gerekli genişliği kaplar.

Bu paragrafın içindeSatır içi <span> elementi.

Satır içi elementlerin bazı örnekleri:

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

Display: gizli;

display: gizli; JavaScript ile birlikte kullanılır, elementleri silmeden ve yeniden oluşturmadan gizlemek ve göstermek için. Bu hedefe nasıl ulaşabileceğinizi öğrenmek istiyorsanız, bu sayfadaki son örneği gözden geçirebilirsiniz.

Varsayılan olarak<script> elementler display: gizli;.

Varsayılan Display Değerini Geçersiz Kılma

Daha önce belirtildiği gibi, her elementin bir varsayılan display değeri vardır. Ancak, bunu geçersiz kılabilirsiniz.

Satır içi elementi blok elementine, tersini de yaparak, sayfanın belirli bir şekilde görüntülenmesini sağlarken Web standartlarına uyum sağlamak için çok faydalıdır.

Yatay menü oluşturmak için genellikle satır içi elementler oluşturulur. <li> Element:

örnek

li {
  display: satır içi;
}

Kendi Kendine Deney

Dikkat:elementsinin display özniteliğini ayarlamak yalnızcaelementin gösterimideğiştirmez. Bu nedenle, display: blok; dahilinde diğer blok elementleri içermeyen satır içi elementlerdir.

Aşağıdaki örnek <span> elementini blok elementi olarak gösterir:

örnek

span {
  display: blok;
}

Kendi Kendine Deney

Aşağıdaki örnek <a> elementini blok elementi olarak gösterir:

örnek

a {
  display: blok;
}

Kendi Kendine Deney

Gizlenmiş element - display: gizli mi yoksa visibility: gizli mi?

display: gizli

visibility: gizli

Sıfırla

Tümünü display öznitelik olarak ayarlanmıştır gizli Elementi gizleyebilirsiniz. Bu element gizlenecek ve sayfa bu elementin içinde olmadığı gibi görünecektir:

örnek

h1.gizli {
  display: gizli;
}

Kendi Kendine Deney

visibility: gizli; Ayrıca elementi gizleyebilirsiniz.

Ancak, bu element hala önceki ile aynı alanı kaplayacak. Element gizlenecek, ancak hala düzeni etkileyecektir:

örnek

h1.gizli {
  visibility: hidden;
}

Kendi Kendine Deney

Daha Fazla Örnek

display: none; ile visibility: hidden; arasındaki farklar
display: none; ile visibility: hidden; arasındaki fark
CSS ve JavaScript'i bir araya kullanarak içerik gösterme
Bu örnek, CSS ve JavaScript kullanarak tıklama olduğunda elementi nasıl gösterdiğinizi gösterir.

CSS Display/Visibility Özellikleri

Özellik Açıklama
display Elementin nasıl gösterileceğini belirler.
visibility Belirtilen elementin görünür olup olmaması gerektiğini belirler.