CSS Display Kullanımı

Konuyu Okuyanlar (0 kayıtlı üye )

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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.

1608735030886.png
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.
1608735042389.png

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.
1608735055112.png

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.
1608735066417.png

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>
 
Üst Alt