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

Sıradaki ders: Renk fonksiyonları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler