manual de referência CSS

regras CSS @

大全 de propriedades CSS

Função CSS calc()

A função CSS calc() permite que você execute cálculos ao declarar valores de atributos CSS. Pode ser usada em: <length>, <frequency>, <angle>, <time>, <number> ou <integer>.

Função CSS

Exemplo online

Use a função calc() para calcular a largura do elemento <div>:

Exemplo

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Tutorial Básico(oldtoolbag.com)</title>/title>　
<style>
#div1　{
　　　　position: absolute;
　　　　left:　50px;
　　　　width: calc(100%　-　100px);
　　　　border:　1px sólido preto;
　　　　background-color: yellow;
　　　　padding:　5px;
　　　　text-align: center;
}
</style>
</head>
<body>
<p>Crie um div que estenda toda a tela, com div de ambos os lados　50px de espaço entre: </p>
<div id="div1">algum texto...</div>
</body>
</html>

Teste e veja ‹/›

Definição e uso

A função calc() é usada para calcular valores de comprimento dinamicamente.

É importante notar que os operadores precisam de um espaço antes e depois, por exemplo:width: calc(100% - 10px);
Qualquer valor de comprimento pode ser calculado usando a função calc();
A função calc() suporta "+", "-", "*", "/Operação de expressão;
A função calc() usa as regras de precedência de operações matemáticas padrão;

Versão de suporte: CSS3

Compatibilidade do navegador

Os números na tabela representam o número da primeira versão do navegador que suporta essa função.

"webkit" ou "moz" ou "o" especificam o número da primeira versão do suporte para essa função como prefixo.

Função
calc()	26.0 19.0　-webkit-	9.0	16.0 4.0　-moz-	7.0 6.0　-webkit-	15.0

Sintaxe CSS

calc(expression)

Valor	Descrição
expression	Obrigatório, uma expressão matemática, o valor resultante será usado como retorno.

A função calc() usa uma expressão como parâmetro, usando o resultado dessa expressão como valor. Essa expressão pode ser uma combinação de qualquer operador, seguindo as regras de precedência de operadores de expressões simples. Exemplo: width: calc(100% - 80px);

Função CSS

Regra @charset CSS Funções CSS