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