CSS matematiske funktioner tillader matematiske udtryk at være bruges som ejendomsværdier. Her vil vi forklare calc(), max() og min() funktioner.
calc()Funktionen calc() udfører en beregning, der skal bruges som egenskabsværdien.
calc(expression)Påkrævet. Et matematisk udtryk. Resultatet vil blive brugt som værdien.
Følgende operatorer kan bruges: + - * /
Lad os se på et eksempel:
Brug calc() til at beregne bredden af et <div>-element:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
} Prøv det selv →
<!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()Funktionen max() bruger den største værdi, fra en kommasepareret liste over værdier, som ejendomsværdien.
max(value1, value2, ...)Påkrævet. En liste over kommaseparerede værdier - hvor den største værdi er valgt
Lad os se på et eksempel:
Brug max() til at indstille bredden af #div1 til den værdi, der er størst, 50% eller 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
} Prøv det selv →
<!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()Funktionen min() bruger den mindste værdi, fra en kommasepareret liste over værdier, som ejendomsværdien.
min(value1, value2, ...)Påkrævet. En liste over kommaseparerede værdier - hvor den mindste værdi er valgt
Lad os se på et eksempel:
Brug min() til at indstille bredden af #div1 til den værdi, der er mindst, 50% eller 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
} Prøv det selv →
<!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>
Giver dig mulighed for at udføre beregninger for at bestemme CSS-egenskabsværdier
Bruger den største værdi fra en kommasepareret liste over værdier som ejendomsværdi
Bruger den mindste værdi fra en kommasepareret liste over værdier som ejendomsværdi