Matematické funkce CSS

Obsah

    Zobrazit obsah

Matematické funkce CSS umožňují být matematickými výrazy použity jako hodnoty majetku. Zde vysvětlíme calc(), funkce max() a min().

Funkce calc()

Funkce calc() provede výpočet, který se použije jako hodnota vlastnosti.

Syntaxe CSS

calc(expression)
expression

Požadované. Matematický výraz. Výsledek bude použit jako hodnota.
Lze použít následující operátory: + - * /

Podívejme se na příklad:

Příklad

Použijte calc() k výpočtu šířky prvku <div>:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
    border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Zkuste to sami →

<!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>

Funkce max()

Funkce max() používá největší hodnotu, ze seznamu hodnot oddělených čárkami jako hodnotu vlastnosti.

Syntaxe CSS

 max(value1, value2, ...)
value1, value2, ...

Požadované. Seznam hodnot oddělených čárkou - kde je největší hodnota vybráno

Podívejme se na příklad:

Příklad

Pomocí max() nastavte šířku #div1 podle toho, která hodnota je větší, 50 % nebo 300 pixelů:

#div1 {
  background-color: yellow;
  height: 100px;
  
  width: max(50%, 300px);
}

Zkuste to sami →

<!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>

Funkce min()

Funkce min() používá nejmenší hodnotu, ze seznamu hodnot oddělených čárkami jako hodnotu vlastnosti.

Syntaxe CSS

 min(value1, value2, ...)
value1, value2, ...

Požadované. Seznam hodnot oddělených čárkou - kde je nejmenší hodnota vybráno

Podívejme se na příklad:

Příklad

Pomocí min() nastavte šířku #div1 na hodnotu, která je nejmenší, 50 % nebo 300 pixelů:

#div1 {
  background-color: yellow;
  height: 100px;
  
  width: min(50%, 300px);
}

Zkuste to sami →

<!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>

Všechny matematické funkce CSS

calc()

Umožňuje provádět výpočty k určení hodnot vlastností CSS

max()

Použije největší hodnotu ze seznamu hodnot oddělených čárkami jako hodnota majetku

min()

Použije nejmenší hodnotu ze seznamu hodnot oddělených čárkami jako hodnota majetku