CSS'de matematiksel fonksiyonları sayesinde hesaplamalar yapabiliriz. Bu fonksiyonlar calc(), max() ve min() olmak üzere 3 tanedir.

CSS calc Kullanımı

CSS'de calc fonksiyonu, matematiksel hesaplamalar yapmakta kullanılır. Fonksiyon içine yazdığınız matematiksel işlemleri değer olarak atayacaktır. Matematiksel işlemler için kullanılacak operatörler şunlardır : ( +, - , * , /).

 
 
 
 
 
<html>
<head>
<style>
#box {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
 
<h1>calc() Kullanımı</h1>
 
<p>Ekranın her iki tarafı ile ekranın kenarları arasında 50 piksel boşluk olacak şekilde bir div oluşturun:</p>
 
<div id="box">Lorem ipsum...</div>
 
</body>
</html>
 

CSS max Kullanımı

CSS'de max fonksiyonu, parametre verilmiş değerlerden en büyük olanını geri döndürür.

 
<html>
<head>
<style>
#box {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
</style>
</head>
<body>
 
<h1>max() Kullanımı</h1>
 
<p>#box'ın genişliğini en büyük değere, %50 veya 300 piksele ayarlamak için max() kullanın.</p>
 
<div id="box">Lorem ipsum...</div>
 
<p>Etkiyi görmek için tarayıcı penceresinin boyutu ile oynayın.</p>
 
</body>
</html>

CSS min Kullanımı

CSS'de min fonksiyonu, parametre verilmiş değerlerden en küçük olanını geri döndürür.

 
 
 
 
 
<html>
<head>
<style>
#box {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
</style>
</head>
<body>
 
<h1>min() Kullanımı</h1>
 
<p>#box'ın genişliğini en küçük değere, %50 veya 300 piksele ayarlamak için max() kullanın.</p>
 
<div id="box">Lorem ipsum...</div>
 
<p>Etkiyi görmek için tarayıcı penceresinin boyutu ile oynayın.</p>
 
</body>
</html>