calc() fonksiyonu
calc() ile matematiksel hesaplamaları öğrenirsin.
calc() nedir?
calc() fonksiyonu farklı birimleri matematiksel olarak birleştirir. width: calc(100% - 4rem) yazarsan, tarayıcı yüzde ile rem'i birlikte hesaplar.
İşleçler + - * / ile yapılır. Toplama ve çıkarmada işlecin iki yanında boşluk olmak zorundadır; çarpma ve bölmede birimler dikkatle kullanılır.
İşleçler ve boşluk
calc() içinde + ve - işleçlerinin etrafında birer boşluk olmak zorundadır. calc(100% - 32px) doğru; calc(100%-32px) ise yanlış.
Çarpma ve bölmede bir taraf birimsiz sayı olmalıdır: calc(2rem * 3) ya da calc(100% / 4). İki birimi çarpmak her zaman geçersizdir.
Çarpma ve bölme
calc() ile bir uzunluğu sayıyla çarpabilir, bir uzunluğu sayıya bölebilirsin. calc(1.5rem * 2) sonucu 3rem'dir; calc(100% / 3) ise üç eşit sütun için kullanışlıdır.
Bu işleçlerde sayı birimsiz olmalı; iki birimi çarpamazsın. Yuvarlama hatası olsa da tarayıcı sonucu pikselleştirir ve uygular.
Uygulama Panel için calc
Bir .panel seçicisi yaz. Genişliği calc(100% - 4rem), iç boşluğu calc(1rem + 8px) olarak ata.
Örnek çözümü göster
/* panel bölümünü ekle */
.panel {
width: calc(100% - 4rem);
padding: calc(1rem + 8px);
}Kendini test et
-
Hangisi geçerli calc() yazımıdır?
/* + ve - etrafında boşluk şart */- calc(100% - 50)
- calc(100% -50px)
- calc(100%-50px)
- calc(100% - 50px)
Cevabı göster
calc(100% - 50px) — Doğru. + ve - etrafında boşluk olmalı: calc(100% - 50px).
-
calc ile genişlik
.panel { width: calc(____ - 2rem); }Cevabı göster
.panel { width: calc(100% - 2rem); } -
İşleç-anlam eşle
- +
- Toplama
- -
- Çıkarma
- *
- Çarpma
- /
- Bölme