Meydan okuma - Düzen temelleri
Display ve position ile basit bir sayfa düzeni kurarsın.
Display ve position'ı hatırla
Sayfa düzeni display ve position ile başlar. display: block bir öğeyi tam satır kaplatır; display: inline-block satır içi dururken genişlik ve yükseklik almayı sağlar. Bu ikisi başlangıç seviyesinde en sık kullanılan düzen tuğlalarıdır.
position: relative öğeyi normal akışta tutar ama top, right gibi değerlerle kaydırır. position: absolute ise öğeyi en yakın konumlu atasına göre yerleştirir; bu yüzden genellikle relative bir kabın içine koyulur.
Uygulama Sayfa düzenini kur
Bir .header sınıf seçicisi ekle. position özelliğini relative, padding özelliğini 1rem, background özelliğini #1a1a2e, color özelliğini #fff yap. Sonra .header .badge seçicisi ekle: display özelliği inline-block, position özelliği absolute, top özelliği 0, right özelliği 1rem olsun.
Örnek çözümü göster
/* sayfa düzeni */
.header {
position: relative;
padding: 1rem;
background: #1a1a2e;
color: #fff;
}
.header .badge {
display: inline-block;
position: absolute;
top: 0;
right: 1rem;
}Düzen ipuçları
Başlangıç seviyesinde en sık kullanılan düzen örüntüsü şudur: kapsayıcıya position: relative verilir, içindeki rozet ya da simge position: absolute ile köşeye yerleştirilir. Böylece ana akış bozulmadan küçük öğeler üst köşeye, köşeye konabilir.
display: inline-block ise buton, rozet ve etiket gibi küçük kutuları satır içinde yan yana dizmek için idealdir. Metin hizalaması için text-align: center yeter; kartlar büyük kutu olduğunda onun yerine block kullanılır.
Kendini test et
-
display: inline-block neyi sağlar?
.badge { display: inline-block; padding: 0.25rem 0.75rem; width: 80px; }- Satır içi kalırken genişlik ve yükseklik alır
- Öğeyi yeni satıra taşır
- Öğeyi tamamen gizler
- Yerini en yakın atanın üstüne alır
Cevabı göster
Satır içi kalırken genişlik ve yükseklik alır — Doğru. inline-block satır içi dururken width/height ve padding öğeleri uygulanır.
-
Rozeti kaba göre konumlandırmak için değeri tamamla
.header { position: relative; } .header .badge { position: ____; top: 0; right: 1rem; }Cevabı göster
.header { position: relative; } .header .badge { position: absolute; top: 0; right: 1rem; } -
Display ve position değerini rolüyle eşleştir
- block
- Tam satır kaplayan kutu
- inline-block
- Satır içi ölçülü kutu
- relative
- Akışta kalan, kayan konum
- absolute
- Ataya göre sabit konum