From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/calc()/index.html | 164 ++++++++++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/pt-br/web/css/calc()/index.html (limited to 'files/pt-br/web/css/calc()') diff --git a/files/pt-br/web/css/calc()/index.html b/files/pt-br/web/css/calc()/index.html new file mode 100644 index 0000000000..b765f7c051 --- /dev/null +++ b/files/pt-br/web/css/calc()/index.html @@ -0,0 +1,164 @@ +--- +title: calc() +slug: Web/CSS/calc() +tags: + - CSS + - Calculate + - Função + - Função CSS + - Layout + - Web + - calc +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

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

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

Syntax

+ +

A função  calc() 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ão operator precedence rules:

+ +
+
+
+
Adição.
+
-
+
Subtração.
+
*
+
Multiplicação. Pelo menos um dos argumentos deve ser um {{cssxref("<number>")}}.
+
/
+
Divisão. O operador da direita deve ser um {{cssxref("<number>")}}.
+
+ +

Os operandos na expressão podem ser qualquer valor de sintaxe {{cssxref ("<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

+ + + +

Formal syntax

+ +
{{csssyntax}}
+ +

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:

+ +
.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;
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}

+ +

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

+ +

Outro caso para calc() é 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:

+ +
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, utilizamos calc() novamente para estabelecer que eles devem ter a largura de seu contêiner menos 1em. Então, o seguinte HTML utiliza este CSS:

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

{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}

+ +

calc( ) inserido em variáveis de CSS

+ +

Você também pode utilizar calc() com variáveis de CSS. Considere o seguinte código:

+ +
.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 de widthC será calc( calc( 100px / 2) / 2), então quando for atribuído à propriedade de largura .foo, todos os calc() internos (não importa o qquão profundamente atribuídos) serão nivelados para apenas parênteses, de modo que o valor da propriedade width será eventualmente calc( ( 100px / 2) / 2), i.e. 25px. Resumindo: um calc() dentro de um calc() é idêntico à parênteses.

+ +

Questões de acessibilidade

+ +

Quando calc() é usado para controlar o tamanho do texto, certifique-se de que um dos valores inclui uma unidade de comprimento relativo, por exemplo:

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

Isso garante que o tamanho do texto será redimensionado se a página for ampliada.

+ + + +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}Definição inicial
+ +

Compatibilidade do navegador

+ + + +

{{Compat("css.types.calc")}}

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf