Funções matemáticas CSS

Índice

    Mostrar índice

As funções matemáticas CSS permitem que expressões matemáticas sejam usados como valores de propriedade. Aqui, explicaremos o calc(), funções max() e min().

A função calc()

A função calc() executa um cálculo para ser usado como valor da propriedade.

Sintaxe CSS

calc(expression)
expression

Obrigatório. Uma expressão matemática. O resultado será usado como valor.
Os seguintes operadores podem ser usados: + - * /

Vamos ver um exemplo:

Exemplo

Use calc() para calcular a largura de um elemento <div>:

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

Experimente você mesmo →

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

A função max()

A função max() usa o maior valor, de uma lista de valores separados por vírgula, como o valor da propriedade.

Sintaxe CSS

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

Obrigatório. Uma lista de valores separados por vírgula - onde está o maior valor escolhido

Vamos ver um exemplo:

Exemplo

Use max() para definir a largura de #div1 para o valor maior, 50% ou 300 pixels:

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

Experimente você mesmo →

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

A função min()

A função min() usa o menor valor, de uma lista de valores separados por vírgula, como o valor da propriedade.

Sintaxe CSS

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

Obrigatório. Uma lista de valores separados por vírgula - onde o menor valor é escolhido

Vamos ver um exemplo:

Exemplo

Use min() para definir a largura de #div1 para o valor menor, 50% ou 300 pixels:

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

Experimente você mesmo →

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

Todas as funções matemáticas CSS

calc()

Permite realizar cálculos para determinar valores de propriedades CSS

max()

Usa o maior valor, de uma lista de valores separados por vírgula, como o valor da propriedade

min()

Usa o menor valor, de uma lista de valores separados por vírgula, como o valor da propriedade