Fonctions mathématiques CSS

Les fonctions mathématiques CSS permettent d'utiliser des expressions mathématiques comme valeurs d'attributs. Ce chapitre expliquera calc(),max() Et min() Fonction.

Fonction calc()

calc() La fonction effectue un calcul et utilise le résultat comme valeur de l'attribut.

Syntaxe CSS

calc(expression)
Valeur Description
expression Obligatoire. Expression mathématique. Le résultat sera utilisé comme valeur. Les opérateurs suivants peuvent être utilisés : +, -, *, /

Voyons un exemple :

Exemple

Utiliser calc() Calculer la largeur de l'élément <div> :

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Essayer vous-même

Fonction max()

max() La fonction utilise la valeur la plus grande de la liste de valeurs séparées par des virgules comme valeur de l'attribut.

Syntaxe CSS

max(value1, value2, ...)
Valeur Description
value1, value2, ... Obligatoire. Liste de valeurs séparées par des virgules - choisir la valeur la plus grande.

Voyons un exemple :

Exemple

Utiliser max() Définir la largeur de #div1 sur la valeur maximale entre 50% et 300px :

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

Essayer vous-même

Fonction min()

min() La fonction utilise la valeur la plus petite de la liste de valeurs séparées par des virgules comme valeur de l'attribut.

Syntaxe CSS

min(value1, value2, ...)
Valeur Description
value1, value2, ... Obligatoire. Une liste de valeurs séparées par des virgules - choisir la valeur la plus petite

Voyons un exemple :

Exemple

Utiliser min() Définir la largeur de #div1 sur la valeur minimale entre 50% et 300px :

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

Essayer vous-même

Référence des fonctions CSS

Pour obtenir une liste complète de toutes les fonctions CSS, veuillez visiter notre Manuel de référence des fonctions CSS.