Função Matemática do CSS

As funções matemáticas CSS permitem usar expressões matemáticas como valores de atributos. Este capítulo explicará calc(),max() E min() Função.

Função calc()

calc() A função executa a contagem e usa o resultado como valor do atributo.

Sintaxe do CSS

calc(expression)
Valor Descrição
expression Obrigatório. Expressão matemática. O resultado será usado como valor. Pode usar os seguintes operadores: +, -, *, /

Vamos ver um exemplo:

Exemplo

Usar calc() Calcule a largura do elemento <div>:

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

Experimente você mesmo

Função max()

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

Sintaxe do CSS

max(value1, value2, ...)
Valor Descrição
value1, value2, ... Obrigatório. Lista de valores separados por vírgula - escolha o maior valor.

Vamos ver um exemplo:

Exemplo

Usar max() Defina a largura de #div1 para o maior valor entre 50% e 300px:

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

Experimente você mesmo

Função min()

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

Sintaxe do CSS

min(value1, value2, ...)
Valor Descrição
value1, value2, ... Obrigatório. Uma lista de valores separados por vírgula - escolha o menor valor

Vamos ver um exemplo:

Exemplo

Usar min() Defina a largura de #div1 para 50% ou o menor valor entre 300px:

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

Experimente você mesmo

Referência de função CSS

Para obter uma lista completa de todas as funções CSS, acesse nossa Manual de referência de função CSS.