Meydan okuma - Kutu modeli

Kutu modelini kullanarak bir kart bileşeni tamamlarsın.

Kutu modelini hatırla

Her HTML öğesi bir kutudur. width ve height içerik alanını, padding iç boşluğu, border kenarlığı, margin ise dış boşluğu belirler. border-radius köşeleri yuvarlatır, box-shadow gölge verir.

box-sizing: border-box yazarsan padding ve border, width değerinin içinden sayılır. Böylece kart genişliği sabit kalır, içerik taşması oluşmaz. Bu yüzden çoğu kart bileşeninde ilk iş olarak border-box tercih edilir.

Uygulama Kart bileşenini tamamla

Bir .card sınıf seçicisi ekle. width özelliğini 320px, padding özelliğini 1.5rem, margin özelliğini 1rem yap. border-radius özelliği 12px, box-shadow özelliği 0 4px 12px rgba(0, 0, 0, 0.1), box-sizing özelliği border-box olsun.

Örnek çözümü göster

/* kart bileşeni */
.card {
  width: 320px;
  padding: 1.5rem;
  margin: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

Gölge ve köşe ipuçları

box-shadow yatay, dikey, bulanıklık ve yayılma değerlerini alır: 0 4px 12px rgba(0, 0, 0, 0.1) hafif bir alt gölge verir. Yüksek bulanıklık gölgeyi yumuşatır; rgba'nın son kanalı yoğunluğu ayarlar.

border-radius küçük değerlerde kart nazikçe yuvarlanır; büyük değerlerde buton ya da rozet görüntüsü verir. Bu iki özelliği birlikte kullanmak kartları derinlikli ve çağdaş gösterir.

Kendini test et

box-sizing: border-box neyi değiştirir?
```
.card {
  width: 300px;
  padding: 1rem;
  border: 2px solid #333;
  box-sizing: border-box;
}
```
- Genişlik 300px üzerine çıkar
- padding ve border 300px'in içinde sayılır
- margin değeri sıfırlanır
- border görünmez olur
Cevabı göster

padding ve border 300px'in içinde sayılır — Doğru. border-box ile padding ve border width değerine dahil edilir; kart 300px kalır.

Kart köşesini yuvarlatan değeri tamamla

.card {
  padding: 1.5rem;
  border-radius: ____;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Cevabı göster

.card {
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Kutu özelliğini rolüyle eşleştir

width

İçerik alanı genişliği
padding

İç boşluk
border

Kenarlık
margin

Dış boşluk

Sıradaki ders: Meydan okuma - Renk ve arka plan

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler