English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

manuel de référence CSS

règle CSS (RULES)

大全 des attributs CSS

Fonction CSS calc()

La fonction CSS calc() vous permet d'exécuter des calculs lors de la déclaration des valeurs des propriétés CSS. Elle peut être utilisée dans les cas suivants : <length>、<frequency>、<angle>、<time>、<number> ou <integer>.

Fonction CSS

Exemple en ligne

Utilisation de la fonction calc() pour calculer la largeur de l'élément <div> :

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</title>　
<style>
#div1　{
　　　　position: absolute;
　　　　left:　50px;
　　　　width: calc(100%　-　100px);
　　　　border:　1px solide noir;
　　　　background-color: yellow;
　　　　padding:　5px;
　　　　text-align: center;
}
</style>
</head>
<body>
<p>Créer un div couvrant tout l'écran, avec un div à chaque extrémité　50px d'espace : </p>
<div　id="div1">quelques textes...</div>
</body>
</html>
Voyons si ‹/›

Définition et utilisation

La fonction calc() est utilisée pour calculer dynamiquement les valeurs de longueur.

  • Il convient de noter que des espaces doivent être conservés avant et après les opérateurs, par exemple :width: calc(100% - 10px);

  • Toute valeur de longueur peut être calculée avec la fonction calc() ;

  • La fonction calc() prend en charge "+", "-", "*", "/Opération ;

  • La fonction calc() utilise les règles de priorité des opérations mathématiques standards ;

Version prise en charge : CSS3

Compatibilité du navigateur

Les nombres dans le tableau représentent la première version du navigateur prenant en charge la fonction.

"webkit" ou "moz" ou "o" indique le préfixe de la première version du navigateur qui prend en charge cette fonction.

Fonction




calc()26.0
19.0　-webkit-		9.016.0
4.0　-moz-		7.0
6.0　-webkit-		15.0

Syntaxe CSS

calc(expression)
ValeurDescription
expressionObligatoire, une expression mathématique, la valeur du résultat sera utilisée comme valeur après l'opération.
La fonction calc() utilise une expression en tant que paramètre, et utilise la valeur de cette expression comme valeur. Cette expression peut être une combinaison d'opérateurs suivis des règles de traitement des opérateurs standards d'expressions simples. Exemple : width: calc(100% - 80px);

Fonction CSS

Règle @charset CSSFonctions CSS