Özet - Çok yönlü kart
Mantıksal özelliklerle çok yönlü kart düzeni kurarsın.
Özet — Yazım modu ve mantıksal özellikler
Bu grupta writing-mode, mantıksal özellikler, inset, eksenler ve direction kavramlarını birleştirdin. Yazım modu metnin akışını değiştirir; mantıksal özellikler eksenlere göre çalışır.
Şimdi tüm bu bildirimleri bir arada kullanacaksın: bir kart hem yatay hem dikey düzende çalışsın. Yön değişse bile yerleşimi koruyan bir bileşen tasarlayacaksın.
Uygulama Çok yönlü kart kenar boşlukları
.multi-card seçicisi için şu bildirimleri yaz: margin-inline: 1rem ve padding-block: 2rem. Her ikisi de aynı blokta olsun. Yalnızca bu iki bildirimi içersin.
Örnek çözümü göster
/* kart çok yönlü olsun */
.multi-card {
margin-inline: 1rem;
padding-block: 2rem;
}Uygulama RTL uyumlu yerleşim
.news seçicisi için iki bildirim yaz: writing-mode: horizontal-tb ve direction: rtl. Bu sayede kart yatay modda ama sağdan sola akar. İki bildirim de aynı blokta olsun.
Örnek çözümü göster
/* haber kutusu RTL uyumlu olsun */
.news {
writing-mode: horizontal-tb;
direction: rtl;
}Kendini test et
-
Hangisi mantıksal bir özelliktir?
- padding-top
- margin-right
- padding-block
- bottom: 10px
Cevabı göster
padding-block — Doğru. padding-block mantıksal bir özelliktir.
-
Tam kaplayan kaplama
.overlay { position: fixed; ____: 0; }Cevabı göster
.overlay { position: fixed; inset: 0; }