Yüzde birimi CSS'in en eski ve en esnek birimlerinden biri. CSS’in ilk günlerinden beri vardır. Ancak neye göre yüzde olduğu her property'de farklı! Detaylı açıklayayım.
Responsive tasarım için idealdir.
Parent boyutuna göre otomatik uyum sağlar.
Tarayıcı yeniden boyutlandığında değerler otomatik güncellenir → reflow tetiklenir.
1. % Birimi Temel Mantığı
% her zaman bir referans değere göre hesaplanır.
.child {
width: 50%; /* Neyin
Pixel, CSS'in en eski ve en tartışmalı birimidir. "Absolute unit" olarak sınıflandırılsa da, aslında durum biraz daha karmaşık. Detaylı açıklayayım.
1. PX Nedir? (Teknik Gerçek)
CSS Pixel ≠ Fiziksel Pixel
CSS Pixel (Reference Pixel)
↓
Device Independent Pixel (DIP)
↓
Physical Pixel (gerçek ekran pikselleri)
Önemli: 1px CSS'de her zaman aynı fiziksel boyut DEĞİLDİR!
Pixel Density (DPR - Device
CSS'te bazı özellikler birim gerektirmeyen saf sayı değerleri kabul eder. Bu "unitless numbers" kavramı, CSS'in temel mekaniklerinden biridir.
Özellik
Unitless kabul eder mi?
Örnek
Açıklama
line-height
✔
line-height: 1.4;
Font yüksekliği ile çarpılan oran.
z-index
✔
z-index: 10;
Katman sırası.
opacity
✔