calc Fonksiyonu

calc fonksiyonu, CSS özellik değerlerinin hesaplanmasını sağlar. Fonksiyon, parametre olarak bir matematiksel ifade alır ve hesaplama sonucunu bir CSS özellik değeri olarak kullanılabilir. İfade, +, -, *, / operatörlerini içerebilir.

Sözdizimi

cssseçici {
  özellik: calc(ifade);
}

Örnek

Bir bloğun genişliğinin ebeveyninin genişliğinin 100%'si eksi 50px olmasını sağlayalım:

html<div id="parent">
  <div id="child"></div>
</div>

css#child {
  width: calc(100% - 50px);
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}
#parent {
  border: 1px solid green;
}

Результат:

Ayrıca Bakınız