calc()
- Data publikacji
- Ostatnio edytowano
Przeznaczenie funkcji calc()
Za pomocą funkcji calc()
możemy sprawić, aby przeglądarka internetowa dokonała matematycznego obliczenia interesującej nas wartości właściwości CSS. Mowa tu o dowolnej wartości, która może zostać wyrażona za pomocą liczby wraz z ewentualną jednostką CSS.
Parametry funkcji calc()
- Przykładowe zapisy
-
calc(10px + 2em)
calc(20% - 50px)
calc(1.45E2px + 5em)
calc(1em*2)
calc(50px/5)
calc(2 * 2em + 15px)
calc(2 * (2em + 15px))
calc(2 * (2em + 15px) / 4)
translateX(calc(10em - 20%))
- expression
-
Parametr
expression
jest wymaganym parametrem funkcjicalc()
. Parametrexpression
określa matematyczne wyrażenie, które powinno zostać obliczone przez przeglądarkę internetową.
Przykład funkcji calc()
padding-top:calc(3em - 5px);
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
padding-top:calc(3em - 5px);
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
rozmiar górnego wewnętrznego marginesu tego elementu "div" został obliczony przez przeglądarkę internetową na podstawie matematycznego wyrażenia "3em - 5px", ponieważ do tego elementu "div" została dodana właściwość "padding-top" wraz z wartością w postaci funkcji "calc()", w której to funkcji zostało użyte następujące matematyczne wyrażenie: "3em - 5px"
</div>
</body>
</html>
Interpretacja funkcji calc()
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 9
-
tak
Zobacz więcej informacji o interpretacji funkcji calc().