Fonctions mathématiques CSS
Les fonctions mathématiques CSS permettent d'utiliser des expressions mathématiques comme valeurs de propriété. Ici, nous expliquerons les fonctions calc(),
max()et min().
La fonction calc()
La calc()fonction effectue un calcul à utiliser comme valeur de propriété.
Syntaxe CSS
calc(expression)
| Value | Description |
|---|---|
| expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Prenons un exemple :
Exemple
Utilisez calc() pour calculer la largeur d'un élément <div> :
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
La fonction max()
La max()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
max(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Prenons un exemple :
Exemple
Utilisez max() pour définir la largeur de #div1 sur la valeur la plus grande, 50 % ou 300px :
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
La fonction min()
La min()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
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Prenons un exemple :
Exemple
Utilisez min() pour définir la largeur de #div1 sur la valeur la plus petite, 50 % ou 300px :
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Toutes les fonctions mathématiques CSS
| Function | Description |
|---|---|
| calc() | Allows you to perform calculations to determine CSS property values |
| max() | Uses the largest value, from a comma-separated list of values, as the property value |
| min() | Uses the smallest value, from a comma-separated list of values, as the property value |