Özet - Kart bileşeni
Kutu modelini kullanarak bir kart bileşeni kurarsın.
Kart bileşenini planlamak
Bu özette kutu modelinin tüm parçalarını bir araya getirip bir kart bileşeni kuracağız. Kart; genişlik, padding, margin ve box-sizing ayarlarıyla hem akışkan hem de tutarlı görünür.
İki temel parça var: kartın kendisi (.product-card) ve onu taşıyan sayfa kapsayıcısı (.page). Önce kartı, sonra kapsayıcıyı yazacağız.
Uygulama Kart bileşenini yaz
.product-card seçicisi için bir blok yaz. İçinde şu dört bildirim olsun: box-sizing: border-box, width: 280px, padding: 16px, margin: 12px.
Örnek çözümü göster
.product-card {
box-sizing: border-box;
width: 280px;
padding: 16px;
margin: 12px;
}Kapsayıcıyı sınırlamak
Kartlar büyük ekranda çok genişleyip okunması zor olabilir. Bu yüzden bir kapsayıcı (.page) içine alıp max-width ile sınırlarız. margin: 0 auto ile de yatayda ortalarız.
Ayrıca kapsayıcının kenarlarına biraz padding veririz; böylece kart dar ekranda ekran kenarına yapışmaz. Bu üçü (max-width, margin auto, padding) beraber akışkan ve dengeli bir düzen kurar.
Uygulama Sayfa kapsayıcısını yaz
.page seçicisi için bir blok yaz. Üç bildirim olsun: max-width: 960px, margin: 0 auto, padding: 0 16px.
Örnek çözümü göster
.page {
max-width: 960px;
margin: 0 auto;
padding: 0 16px;
}Kendini test et
-
.page kapsayıcısı neden önemlidir?
- Büyük ekranda kartların çok genişlemesini engeller ve yatayda ortalar
- Kartların her ekranda aynı genişlikte olmasını sağlar
- Kartların arka plan rengini değiştirir
- Kartları dikeyde hizalar
Cevabı göster
Büyük ekranda kartların çok genişlemesini engeller ve yatayda ortalar — Doğru. max-width + margin: 0 auto + padding, kartları sınırlar ve ortalar.