Yükleniyor...

CSS Display

display sakin bir soruya cevap verir: bu kutu sayfaya nasıl katılır? Bazıları tam genişlik bloklar gibi yığılır; bazıları cümlenin içinde oturur; bazıları düzenden tamamen çıkarılabilir. Bu ders günlük değerleri haritalar — ve derin inline-block alıştırmasını sonraki oturuma bırakır.

Bir display araç seti

📊 Bir bakışta display

Değer Günlük iş
block Kendi satırında başlar; çoğu zaman satır genişliğini doldurur
inline Metin satırında yaşar; width/height çoğu zaman yok sayılır
inline-block Metin gibi satırda oturur ama width/height/padding’i kutu gibi kabul eder
none Öğeyi düzenden kaldırır (boşluk çöker)
flex / grid Güçlü yerleşim modları — sonraki dersler, burada değil

Varsayılan HTML birçok etiket için zaten display seçer (div block, span inline, button çoğu zaman neredeyse inline-block). Akış başka bir iş istediğinde CSS bunu geçersiz kılmanıza izin verir.

Block — kendi satırı, ferah kutu

Block kutular yeni satırda başlar ve tipik olarak kullanılabilir genişliği alır. Başlıklar, paragraflar ve divler varsayılan olarak böyle davranır.

Block zorla

css
CSS Code 
.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}

Inline — cümlenin içinde

Inline kutular metin akışında oturur ve sözcüklerle birlikte sarılır. Saf inline üzerinde width veya height çoğu zaman işe yaramaz — bu yüzden block veya inline-block’a geçilir.

Inline zorla

css
CSS Code 
.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}

Inline-block — kısa bakış

inline-block yer varsa komşuları bir satırda tutar, yine de width, height ve padding’e saygı duyar. Sonraki derste dikkatle pratik yapacaksınız; burada yalnızca melez’i tanıyın.

Inline-block bakışı

css
CSS Code 
.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}

None — düzenden çık

display: none öğeyi gizler ve boşluğunu çökertir. Düzen ve birçok yardımcı onu yokmuş gibi görür. Dağınık kurallar yerine sınıf anahtarı tercih edin.

none ile gizle

css
CSS Code 
.is-hidden {
display: none;
}

visibility: hidden başka bir hikâyedir — kutu hâlâ yer ayırabilir. Bu ders düzen’den gerçek çıkarma için display: none’da kalır. Visibility’yi burada kazmayız.

Sakin bir display alışkanlığı

display’i akış nedenleriyle değiştirin — düğme kozmetiği (önceki ders) için değil, her yerleşim sorununa kestirme olarak da değil (flex/grid sonra). Bilinçli durumları sınıflarla adlandırın.

Göster ve gizle sınıfları

css
CSS Code 
.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}

.panel.is-hidden {
display: none;
}

Üç modu karşılaştır

css
CSS Code 
.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }

Kendiniz deneyin

  1. Bir span’i display: block yapın ve width + padding verin.
  2. Kısa bir div (veya başlık) için display: inline zorlayın ve cümlede görün.
  3. inline-block ile bir .chip ekleyin — width/padding’in çalıştığını görün.
  4. .is-hidden { display: none; } ile bir paneli gizleyin ve sınıfı değiştirin.
  5. Bir cümle yazın: etiket için ne zaman block, ne zaman inline?

Sık hatalar

  • Saf inline üzerinde width / height beklemek
  • Sadece görünümü soldurmak isterken display: none kullanmak — boşluğun çöktüğünü unutmak
  • Bu dersi düğme hover görünümü sanmak (o Buttons’tı)
  • Dört temel değer yerine buraya Flexbox/Grid tarifleri dökmek
  • «Düzenden gizli»yi sonraki derin inline-block dersiyle karıştırmak

Özet

  • display bir kutunun sayfa akışına nasıl katıldığını kontrol eder
  • block kendi satırını alır; inline metinde yaşar
  • inline-block melezdir — pratik sonra
  • none öğeyi ve boşluğunu düzenden kaldırır
  • display’i akış işleri için değiştirin; süslü yerleşimleri sonraya bırakın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 35 / 35
Css Ders