CSS matematiska funktioner tillåter matematiska uttryck att vara används som fastighetsvärden. Här kommer vi att förklara calc()
, max()
och min()
funktioner.
calc()
Funktionen calc()
utför en beräkning som ska användas som egenskapsvärde.
calc(expression)
Nödvändig. Ett matematiskt uttryck. Resultatet kommer att användas som värdet.
Följande operatorer kan användas: + - * /
Låt oss titta på ett exempel:
Använd calc() för att beräkna bredden på ett <div>-element:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
Prova själv →
<!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()
använder det största värdet, från en kommaseparerad lista med värden, som egenskapsvärdet.
max(value1, value2, ...)
Nödvändig. En lista med kommaseparerade värden - där det största värdet är valt
Låt oss titta på ett exempel:
Använd max() för att ställa in bredden på #div1 till vilket värde som är störst, 50 % eller 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
Prova själv →
<!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()
använder det minsta värdet, från en kommaseparerad lista med värden, som egenskapsvärdet.
min(value1, value2, ...)
Nödvändig. En lista med kommaseparerade värden - där det minsta värdet är valt
Låt oss titta på ett exempel:
Använd min() för att ställa in bredden på #div1 till vilket värde som är minst, 50 % eller 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Prova själv →
<!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>
Låter dig utföra beräkningar för att fastställa CSS-egenskapsvärden
Använder det största värdet, från en kommaseparerad lista med värden, som fastighetsvärde
Använder det minsta värdet, från en kommaseparerad lista med värden, som fastighetsvärde