CSS Matematik Fonksiyonları
CSS matematik işlevleri, matematiksel ifadelerin özellik değerleri olarak kullanılmasına izin verir. calc()Burada ,
max()ve min()fonksiyonlarını açıklayacağız .
calc() İşlevi
İşlev calc(), özellik değeri olarak kullanılacak bir hesaplama gerçekleştirir.
CSS Sözdizimi
calc(expression)
| Value | Description |
|---|---|
| expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Bir örneğe bakalım:
Örnek
Bir <div> öğesinin genişliğini hesaplamak için calc() kullanın:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
max() Fonksiyonu
İşlev max(), özellik değeri olarak virgülle ayrılmış bir değerler listesinden en büyük değeri kullanır.
CSS Sözdizimi
max(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Bir örneğe bakalım:
Örnek
#div1'in genişliğini en büyük değere, %50 veya 300 piksele ayarlamak için max() kullanın:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
min() Fonksiyonu
İşlev min(), özellik değeri olarak virgülle ayrılmış bir değerler listesinden en küçük değeri kullanır.
CSS Sözdizimi
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Bir örneğe bakalım:
Örnek
#div1'in genişliğini en küçük değere, %50 veya 300 piksele ayarlamak için min() kullanın:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Tüm CSS Matematik İşlevleri
| Function | Description |
|---|---|
| calc() | Allows you to perform calculations to determine CSS property values |
| max() | Uses the largest value, from a comma-separated list of values, as the property value |
| min() | Uses the smallest value, from a comma-separated list of values, as the property value |