CSS display Property

Daha "Try it Yourself" Aşağıdaki örnekler.

Tanımı ve Kullanımı

Ekran özelliği bir HTML elemanı için kullanılan kutu türünü belirtir.

Tarayıcı Desteği

Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.

Note: değerleri "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" ve "table-row-group" IE7'de ve öncesi desteklenmez. IE8 bir! DOCTYPE gerektirir. IE9 değerleri destekler.

Not: Değerler "flex" ve "inline-flex" Safari'de çalışmak için bir önek gerektirir. Için "flex" kullanın "display: -webkit-flex" için, "inline-flex" kullanmak "display: -webkit-inline-flex;" .

CSS sözdizimi

display: Mülkiyet Değerler

değer	Açıklama	Oynat
inline	Varsayılan değer. Bir satır içi elemanı olarak bir eleman gösterir (like <span>)	Oynat "
block	Bir blok elemanı gibi bir elemanı gösterir (like <p>)	Oynat "
flex	Bir blok düzeyinde esnek bir kap gibi bir elemanı gösterir. CSS3 Yeni
inline-block	bir satır içi seviyeli bir blok kap gibi bir elemanı gösterir. Bu blok içinde blok düzeyinde kutusu olarak biçimlendirilir ve elemanın kendisinin bir satır içi seviyesi kutusu olarak biçimlendirilmiş
inline-flex	satıriçi seviyeden esnek konteyner olarak bir öğe görüntüler. CSS3 Yeni
inline-table	eleman, bir içi seviyesi tablo olarak görüntülenir
list-item	Eleman bir gibi davranmaya Let <li> elemanı	Oynat "
run-in	içeriğe bağlı, blok ya da hat-içi ya gibi bir eleman görüntüler
table	Eleman bir gibi davranmaya Let <table> elemanı
table-caption	Eleman bir gibi davranmaya Let <caption> elemanı
table-column-group	Eleman bir gibi davranmaya Let <colgroup> elemanı
table-header-group	Eleman bir gibi davranmaya Let <thead> elemanı
table-footer-group	Eleman bir gibi davranmaya Let <tfoot> elemanı
table-row-group	Eleman bir gibi davranmaya Let <tbody> elemanı
table-cell	Eleman bir gibi davranmaya Let <td> elemanı
table-column	Eleman bir gibi davranmaya Let <col> elemanı
table-row	Eleman bir gibi davranmaya Let <tr> elemanı
none	Eleman hiç gösterilmeyecektir (has no effect on layout)	Oynat "
initial	varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun	Oynat "
inherit	üst öğesinden bu özelliği devralır. Yaklaşık miras oku

---

Diğer Örnekler

Örnek

devralır özellik değerini nasıl kullanılacağına ilişkin bir gösteri:

body {
    display: inline;
}

p {
    display: inherit;
}

Kendin dene "

Örnek

Bir içindeki bazı esnek öğelerin yönünü ayarlayın <div> ters sırada elemanı:

div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
}

Kendin dene "

---

İlgili Sayfalar

CSS öğretici: CSS Görüntü ve görünürlük

HTML DOM referansı: display property

---

❮ Önceki Sonraki ❯