Genişlik ve yükseklik
width ve height özelliklerini öğrenirsin.
width ve height
width bir kutunun içerik genişliğini, height ise içerik yüksekliğini belirler. Bu iki özellik yalnızca içerik kutusunu ölçüler; padding, border ve margin buna eklenir.
Değer olarak piksel (px), yüzde (%) veya auto verilir. auto tarayıcının boşluğu kendiliğinden dağıtmasını ister; örneğin blok öğeler varsayılan olarak tüm genişliği kaplar.
min-width ve max-width
Bazen kutunun ne kadar küçük veya büyük olabileceğini sınırlamak istersin. min-width bir kutunun en küçük genişliğini, max-width ise en büyük genişliğini zorlar.
Örneğin bir kartta width: 100% yazıp max-width: 600px eklersen, kart küçük ekranda tam genişlik alır, büyük ekranda 600 pikseli geçmez. Buna akışkan ama sınırlı düzen denir.
Uygulama Akışkan kartı yaz
.card seçicisi için bir blok yaz. Genişlik tam olsun (width: 100%), ama 600 pikselden büyük olmasın (max-width: 600px).
Örnek çözümü göster
.card {
width: 100%;
max-width: 600px;
}Kendini test et
-
width özelliği kutunun hangi parçasını ölçer?
- Sadece içerik alanını
- Sadece padding'i
- İçerik, padding ve border'ı birlikte
- Tüm kutuyu (margin dahil)
Cevabı göster
Sadece içerik alanını — Doğru. width yalnızca içerik alanını ölçer; padding ve border buna eklenir.
-
Akışkan kart biçimi
.card { width: 100%; ____: 600px; }Cevabı göster
.card { width: 100%; max-width: 600px; } -
max-width ne zaman işe yarar?
- Pencere küçüldükçe kartı daraltmak için
- Büyük ekranda kartın çok genişlemesini engellemek için
- Kartın arka plan rengini değiştirmek için
- Kartı yatayda ortalamak için
Cevabı göster
Büyük ekranda kartın çok genişlemesini engellemek için — Doğru. max-width, geniş ekranda kartın sınırsız büyümesini engeller.
-
Ölçü özelliğini rolüyle eşleştir
- width
- İçerik genişliğini belirler
- height
- İçerik yüksekliğini belirler
- max-width
- En büyük genişliği sınırlar
- min-width
- En küçük genişliği zorlar