Webdeki her element birer dikdörtgen şekildir. CSS display özelliği ise şeklin nasıl davranacağını belirler. CSS display özelliği içinde yaygın kullanılan bir kaç tane özellik vardır.
|
1 2 3 4 5 6 7 8 |
div { display: inline; /* Tanımlı bir CSS biçimi yoksa her elementin varsayılan değeri inline dır.*/ display: inline-block; /* Aynı satırda blok elemanı gibi davranır. */ display: block; /* <di> ve <section> etiketlerinde olduğu gibi blok elemanı yapar */ display: none; /* Gizler*/ } |
Tüm öğeler için varsayılan değer satır içidir. Çoğu tarayıcı bazı elementleri block olarak değiştirir (Örn:div etiketi).
inline
Öğeler için varsayılan değer. <Span>, <em> veya <b> gibi öğeleri düşünün ve bir metin dizesinde bu öğelerdeki metinlerin nasıl kaydırılacağı, metnin akışını bozmaz.
<span>,<em> ve <i> gibi etiketler için varsayılan değerdir. Bir metin içinde akışı bozmadan metin içinde nasıl kaydırılacağını ifade eder.
Satır içi olan etiketler margin ve padding gibi boşlukları kabul eder. Fakat satır içi özelliğine sahip oldukları için etiketlerin üst ve altına etkisi olmaz.
inline olan etiketler witdh ve height özellikleri bulunmaz.
inline-block
inline-block olaraksatı ayarlanan bir öğe, metnin doğal akışıyla (“taban çizgisi”) aynı hizada olacak şekilde inline ile çok benzer bir davranış gösterir. Fark, en belirgin olan durumu width ve height verebiliyor olmamızdır. inline-block olan etikete margin ve padding verildiğinde satırın yükseklik değerini değiştirdiğini de belirtmek isterim.
block
HTML’de bir kaç tane öğe tarayıcı varsayılan değeri ile display block olarak ayarlanmıştır. Bunlar <div>, <section>, <ul>, <li>, <p>, <h1> gibi etiketler varsayılan olarak bir satırın tamanın kaplarlar. Özel bir genişlik değeri verilmediyse bu elementler satırın tamamını işgal eder.
Aşağıdaki örnekte <p> etiketi block elementtir ve <p> etiketini yeşil renkte çerçeve eklenmiştir.
flexbox
Yeni görüntülenme yöntemlerinden biridir. Akışkan tasarımlar için yeni yaklaşımlar sunar. flexbox konusu kapsamlı olduğu için ayrı bir makale başlığı olarak ele alınması daha uygun olur.
|
1 2 3 4 5 |
.icerik{ display: flex; } |
grid
flexbox özelliği gibi grid özelliği de sayfa yerleşimleri için büyük avantajlar getiri. Mobil tasarımlar ve veri yerleşimleri için güzel çözümler sunar.
|
1 2 3 4 5 |
body { display: grid; } |
none
Öğeyi sayfadan tamamen kaldırır. Öğe DOM içinde mevcut olmasına rağmen akış içinde olmadığı için görsel olarak okuma yapan tarayıcı ve cihazlarda görüntülenmeyecektir.
table
Tablo olmayan elementin tablo gibi davranmasını istiyorsanız kapsayıcı elementi tablo elementi olarak düzenleyebilirsiniz. Aşağıdaki özelliklerle birlikte elementi tablo olarak yapıp içindeki öğeleri hücre gibi olmasını sağlayabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
div { display: table; display: table-cell; display: table-column; display: table-colgroup; display: table-header-group; display: table-row-group; display: table-footer-group; display: table-row; display: table-caption; } |
|
1 2 3 4 5 6 7 8 9 |
<div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> Gross but sometimes useful. </div> </div> </div> |
