Bir web sayfasındaki her öğe dikdörtgen bir kutudur. CSS'deki display özelliği, bu dikdörtgen kutunun nasıl davrandığını belirler. Yaygın olarak kullanılan yalnızca bir avuç değer vardır:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Tüm öğeler için varsayılan değer satır içi değeridir. Çoğu "Kullanıcı Aracısı Stil Sayfası" (tarayıcının tüm sitelere uyguladığı varsayılan stiller) birçok öğeyi "engelle" olarak sıfırlar. Bunların her birini gözden geçirelim ve daha az yaygın olan diğer bazı değerleri ele alalım.
Çizgide
Öğeler için varsayılan değer. Gibi elemanların düşünün , ya ve metnin bir dize içinde bu unsurların içinde sarma metin metnin akışını sonu yok nasıl.
Eleman 1 piksellik kırmızı sınır vardır. Metnin geri kalanıyla aynı hizada olduğuna dikkat edin.
Satır içi bir öğe, kenar boşluğunu ve dolguyu kabul eder, ancak öğe beklediğiniz gibi yine de satır içinde kalır. Kenar boşluğu ve dolgu, diğer öğeleri dikey olarak değil, yalnızca yatay olarak itecektir.
Satır içi bir öğe heightve kabul etmeyecektir width. Sadece görmezden gelecektir.
Satır İçi Blok
Olarak ayarlanan bir öğe inline-block, metnin doğal akışıyla ("taban çizgisinde") satır içi olarak ayarlanacağı için satır içi ile çok benzerdir. Aradaki fark, a ayarlayabilmeniz widthve heighthangisine saygı duyulacağıdır.
Blok
blockTarayıcı UA stil sayfası tarafından bir dizi öğe ayarlanır . Bunlar, çoğunlukla, kap, elemanlar gibi , ve
. Ayrıca aşağıdaki gibi "bloklar" yazın
ve
. Blok seviyesi öğeleri satır içi olarak oturmaz, ancak onları aşar. Varsayılan olarak (bir genişlik ayarlamadan) olabildiğince fazla yatay alan kaplarlar.
Kırmızı kenarlıklı iki öğe
blok düzeyi öğelerdir. Onları satır içi oturmaz aradaki eleman blokları satır içi öğeler aşağıda yıkmak çünkü.
Çalıştırmak
İlk olarak, bu özellik Firefox'ta çalışmıyor. Söylentilere göre teknik özellik yeterince iyi tanımlanmamıştır. Yine de anlamaya başlamak için, bir başlık öğesinin altındaki metinle aynı hizada olmasını istiyor gibisin. Yüzdürmek işe yaramayacak ve başka hiçbir şey olmayacak, başlığın altındaki metin öğesinin alt öğesi olmasını istemediğiniz için kendi bağımsız öğesi olmasını istersiniz. Tarayıcıları "desteklemek" şu şekildedir:
Yine de güvenmeyin.
Flexbox
displayTesis ayrıca flexbox'a gibi yeni bir çeşit silah düzen yöntemleri için kullanılmaktadır.
.header ( display: flex; )
Flexbox sözdiziminin bazı eski sürümleri vardır, bu nedenle flexbox'ı en iyi tarayıcı desteğiyle kullanmanın sözdizimi için lütfen bu makaleye bakın. Bu tam Flexbox kılavuzunu gördüğünüzden emin olun.
Akış Kökü
flow-rootGörüntü değerini yeni bir “blok biçimlendirme bağlam” oluşturur, ancak aksi gibidir block. Yeni bir BFC, dalgalanmaları temizlemek gibi şeylere yardımcı olur ve bunu yapmak için bilgisayar korsanlarına olan ihtiyacı ortadan kaldırır.
.group ( display: flow-root; )
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
Krom
Firefox
IE
Kenar
Safari
58
53
Hayır
79
13
Mobil / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Kafes
Izgara düzeni de başlangıçta display özelliği tarafından ayarlanacaktır.
body ( display: grid; )
İşte bir tarayıcı destek çizelgesi içeren Izgara düzeni ile ilgili kılavuzumuz.
Yok
Öğeyi sayfadan tamamen kaldırır. Öğe hala DOM'deyken görsel olarak ve akla gelebilecek başka bir şekilde kaldırıldığını unutmayın (ona veya alt öğelerine sekme yapamazsınız, ekran okuyucular vb. Tarafından göz ardı edilir).
Tablo Değerleri
Gerekirse, tablo olmayan öğeleri tablo öğeleri gibi davranmaya zorlayan bir dizi görüntüleme değeri vardır. Nadir görülen bir durumdur, ancak bazen tabloların benzersiz konumlandırma güçlerini kullanırken kodunuzla "daha anlamsal" olmanıza izin verir.
