Les fonctions mathématiques CSS permettent d'exprimer des expressions mathématiques utilisées comme valeurs de propriété. Ici, nous allons expliquer le calc(), Fonctions max() et min().
calc()La fonction calc() effectue un calcul à utiliser comme valeur de propriété.
calc(expression)Requis. Une expression mathématique. Le résultat sera utilisé comme valeur.
Les opérateurs suivants peuvent être utilisés : + - * /
Regardons un 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;
} Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<h1>The calc() Function</h1>
<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>
</body>
</html>
max()La fonction max() utilise la plus grande valeur, à partir d'une liste de valeurs séparées par des virgules, comme valeur de propriété.
max(value1, value2, ...)Requis. Une liste de valeurs séparées par des virgules - où la plus grande valeur est choisi
Regardons un exemple :
Utilisez max() pour définir la largeur de #div1 selon la valeur la plus grande, 50 % ou 300 pixels :
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
} Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
</style>
</head>
<body>
<h1>The max() Function</h1>
<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>
<div id="div1">Some text...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
min()La fonction min() utilise la plus petite valeur, à partir d'une liste de valeurs séparées par des virgules, comme valeur de propriété.
min(value1, value2, ...)Requis. Une liste de valeurs séparées par des virgules - où la plus petite valeur est choisi
Regardons un exemple :
Utilisez min() pour définir la largeur de #div1 sur la valeur la plus petite, 50 % ou 300 pixels :
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
} Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
</style>
</head>
<body>
<h1>The min() Function</h1>
<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>
<div id="div1">Some text...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Vous permet d'effectuer des calculs pour déterminer les valeurs des propriétés CSS
Utilise la plus grande valeur, à partir d'une liste de valeurs séparées par des virgules, comme valeur valeur de la propriété
Utilise la plus petite valeur, à partir d'une liste de valeurs séparées par des virgules, comme valeur valeur de la propriété