Fonctions mathématiques CSS
Les fonctions mathématiques CSS permettent d’utiliser des expressions mathématiques comme valeurs de propriété. Ici, nous allons expliquer le calc(),
max()min() les fonctions.
La fonction calc()
Le calc() La fonction effectue un calcul à utiliser comme valeur de propriété.
Syntaxe CSS
| Valeur | Description |
|---|---|
| expression | Requis. Une expression mathématique. Le résultat sera utilisé comme valeur. Les opérateurs suivants peuvent être utilisés : + – * / |
Prenons un exemple :
Exemple
Utilisez calc() pour calculer la largeur d’un élément
#div1 {
position : absolue ;
gauche : 50px ;
largeur : calc (100 % – 100 px) ;
bordure : 1 pixel noir uni ;
couleur de fond : jaune ;
rembourrage : 5px ;
}
Essayez-le vous-même »
La fonction max()
Le max() La fonction utilise la plus grande valeur, à partir d’une liste de valeurs séparées par des virgules, comme valeur de propriété.
Syntaxe CSS
| Valeur | Description |
|---|---|
| valeur1, valeur2… | Requis. Une liste de valeurs séparées par des virgules – où la plus grande valeur est choisie |
Prenons un exemple :
Exemple
Utilisez max() pour définir la largeur de #div1 sur la valeur la plus grande, 50 % ou 300px :
#div1 {
couleur de fond : jaune ;
hauteur : 100px ;
largeur : max(50%, 300px) ;
}
Essayez-le vous-même »
La fonction min()
Le min() La fonction utilise la plus petite valeur, à partir d’une liste de valeurs séparées par des virgules, comme valeur de propriété.
Syntaxe CSS
| Valeur | Description |
|---|---|
| valeur1, valeur2… | Requis. Une liste de valeurs séparées par des virgules – où la plus petite valeur est choisie |
Prenons un exemple :
Exemple
Utilisez min() pour définir la largeur de #div1 sur la valeur la plus petite, 50 % ou 300px :
#div1 {
couleur de fond : jaune ;
hauteur : 100px ;
largeur : min(50%, 300px);
}
Essayez-le vous-même »
Toutes les fonctions mathématiques CSS
| Fonction | Description |
|---|---|
| calcul() | Vous permet d’effectuer des calculs pour déterminer les valeurs des propriétés CSS |
| maximum() | Utilise la plus grande valeur, à partir d’une liste de valeurs séparées par des virgules, comme valeur de propriété |
| min() | Utilise la plus petite valeur, à partir d’une liste de valeurs séparées par des virgules, comme valeur de propriété |
#Fonctions #mathématiques #CSS