calc()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.

* Some parts of this feature may have varying levels of support.

A funçãocalc()CSS permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualquer lugar , como<length>,<frequency>,<angle>,<time>,<percentage>,<number>, e<integer> é permitido.

css

/* propriedade: calc(expressão) */width: calc(100% - 80px);

Syntax

A funçãocalc() recebe uma simples expressão como parâmetro e o resultado desta expressão é utilizado como valor. Pode ser uma simples expressão, combinando os seguintes operadores, utilizando padrãooperator precedence rules:

+: Adição.
-: Subtração.
*: Multiplicação. Pelo menos um dos argumentos deve ser um<number>.
/: Divisão. O operador da direita deve ser um<number>.

Os operandos na expressão podem ser qualquer valor de sintaxe<length>. Você pode usar unidades diferentes para cada valor em sua expressão, se desejar. Você também pode usar parênteses para estabelecer a ordem de computação quando necessário.

Notas

Divisão por 0 (zero) resulta em um erro gerado pelo HTML parser.
Os operadores + e - devem estar cercados porespaço em branco. Por exemplo, calc (50% -8px) será analisado como uma porcentagem seguida por um comprimento negativo - uma expressão inválida — enquanto calc (50% - 8px) é uma porcentagem seguida por um operador de subtração e um comprimento. Da mesma forma, calc (8px + -50%) é tratado como um comprimento seguido por um operador de adição e uma porcentagem negativa.
Os operadores* e/ não requerem espaço em branco, mas adicioná-lo para consistência é permitido e recomendado.
Expressões matemáticas envolvendo porcentagens de larguras e alturas em colunas de tabela, grupos de coluna de tabela, linhas de tabela, grupos de linhas de tabela e células de tabela em tabelas de layout automáticas e fixas podem ser tratadas como seauto tivesse sido especificado.
É permitido aninhar funçõescalc (), em cujo caso as internas são tratadas como parênteses simples.

Formal syntax

<calc()> =
calc(<calc-sum>)

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Exemplos

Posicionando um objeto na tela usando margin

calc() torna mais fácil posicionar um objeto com uma margem definida. Nesse exemplo, o CSS cria um banner que se estende pela janela, com um espaço de 40px entre os dois lados do banner e das bordas da janela:

css

.banner {  position: absolute;  left: 40px;  width: calc(100% - 80px);  border: solid black 1px;  box-shadow: 1px 2px;  background-color: yellow;  padding: 6px;  text-align: center;  box-sizing: border-box;}

html

<div>This is a banner!</div>

Dimensionar campos de formulário automaticamente para caber em seu contêiner

Outro caso paracalc() é ajudar a garantir que os campos do formulário caibam no espaço disponível, sem expandir para além da borda do seu contêiner, enquanto mantém uma margem apropriada.

Veja-mos no CSS:

css

input {  padding: 2px;  display: block;  width: calc(100% - 1em);}#formbox {  width: calc(100% / 6);  border: 1px solid black;  padding: 4px;}

Aqui, o próprio formulário é estabelecido para utilizar 1/6 da largura da janela disponível. Então, para garantir que os campos de entrada mantenham um tamanho apropriado, utilizamoscalc() novamente para estabelecer que eles devem ter a largura de seu contêiner menos 1em. Então, o seguinte HTML utiliza este CSS:

html

<form>  <div>    <label>Type something:</label>    <input type="text" />  </div></form>

calc( ) inserido em variáveis de CSS

Você também pode utilizarcalc() comvariáveis de CSS. Considere o seguinte código:

css

.foo {  --widthA: 100px;  --widthB: calc(var(--widthA) / 2);  --widthC: calc(var(--widthB) / 2);  width: var(--widthC);}

Depois que todas as variáveis forem expandidas, o valor dewidthC serácalc( calc( 100px / 2) / 2), então quando for atribuído à propriedade de largura.foo, todos oscalc() internos (não importa o quão profundamente atribuídos) serão nivelados para apenas parênteses, de modo que o valor da propriedadewidth será eventualmentecalc( ( 100px / 2) / 2), i.e.25px. Resumindo: umcalc() dentro de umcalc() é idêntico à parênteses.