CSS Matematiksel Fonksiyonlar

CSS matematiksel fonksiyonları, matematiksel ifadeleri özellik değerleri olarak kullanmayı sağlar. Bu bölümde calc(),max() ve min() Fonksiyon.

calc() fonksiyonu

calc() Fonksiyon hesap yapar ve sonucu özellik değeri olarak kullanır.

CSS Dilbilgisi

calc(expression)
Değer Açıklama
expression Gerekli. Matematiksel ifade. Sonuç, değeri olarak kullanılacaktır. Aşağıdaki işlevler kullanılabilir: +, -, *, /

Bir örnek görelim:

Örnek

Kullanım calc() <div> elementinin genişliğini hesapla:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Kişisel Deneyim

max() fonksiyonu

max() Fonksiyon, virgülle ayrılmış değer listesindeki en büyük değeri özellik değeri olarak kullanır.

CSS Dilbilgisi

max(value1, value2, ...)
Değer Açıklama
value1, value2, ... Gerekli. Virgülle ayrılmış değer listesi - en büyük değeri seçin.

Bir örnek görelim:

Örnek

Kullanım max() div1 etiketinin genişliğini %50 veya 300px'dan büyük olanına ayarlayın:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

Kişisel Deneyim

min() Fonksiyonu

min() Fonksiyon, virgülle ayrılmış değer listesindeki en küçük değeri özellik değeri olarak kullanır.

CSS Dilbilgisi

min(value1, value2, ...)
Değer Açıklama
value1, value2, ... Gerekli. Virgülle ayrılmış değer listesi - en küçük değeri seçin

Bir örnek görelim:

Örnek

Kullanım min() #div1 genişliğini 50% veya 300px'den küçük olanına ayarlayın:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

Kişisel Deneyim

CSS Fonksiyonları Referans

Tüm CSS fonksiyonlarının tam listesi için lütfen CSS Fonksiyonları Referans Kılavuzu。