CSS matematiska funktioner


Innehållsförteckning

    Visa innehållsförteckning


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.


Funktionen calc()

Funktionen calc() utför en beräkning som ska användas som egenskapsvärde.

CSS-syntax

calc(expression)
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:

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>



Funktionen max()

Funktionen max() använder det största värdet, från en kommaseparerad lista med värden, som egenskapsvärdet.

CSS-syntax

 max(value1, value2, ...)
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:

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>




Funktionen min()

Funktionen min() använder det minsta värdet, från en kommaseparerad lista med värden, som egenskapsvärdet.

CSS-syntax

 min(value1, value2, ...)
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:

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>



Alla CSS Math-funktioner

calc()

Låter dig utföra beräkningar för att fastställa CSS-egenskapsvärden

max()

Använder det största värdet, från en kommaseparerad lista med värden, som fastighetsvärde

min()

Använder det minsta värdet, från en kommaseparerad lista med värden, som fastighetsvärde