Ö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.

Sıradaki ders: Proje: Kişisel blog

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler