English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La funzione CSS calc() ti permette di eseguire calcoli durante la dichiarazione dei valori degli attributi CSS. Può essere utilizzata in casi come: <length>, <frequency>, <angle>, <time>, <number> o <integer>.
Calcolare la larghezza dell'elemento <div> utilizzando la funzione calc():
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di base(oldtoolbag.com)</title>
<style>
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<p>Crea un div che copre lo schermo, con un margine di 50px su entrambi i lati del div:</p>
<div id="div1">Qualche testo...</div>
</body>
</html>Testa per vedere ‹/›La funzione calc() viene utilizzata per calcolare valori di lunghezza dinamicamente.
Occorre notare che devono essere mantenute spazi intorno agli operatori, ad esempio:width: calc(100% - 10px);
Qualsiasi valore di lunghezza può essere calcolato utilizzando la funzione calc();
La funzione calc() supporta gli operatori "+", "-", "*", "/";
La funzione calc() utilizza le regole di priorità di calcolo standard delle operazioni matematiche;
Versioni supportate: CSS3
I numeri nella tabella rappresentano la versione iniziale del browser che supporta la funzione.
"webkit" o "moz" o "o" il numero specificato indica la versione iniziale di supporto della funzione.
| Funzione | |||||
|---|---|---|---|---|---|
| calc() | 26.0 19.0 -webkit- | 9.0 | 16.0 4.0 -moz- | 7.0 6.0 -webkit- | 15.0 |
calc(espressione)
| Valore | Descrizione |
|---|---|
| expression | Obbligatorio, un'espressione matematica, il risultato sarà utilizzato come valore di ritorno dell'operazione. |