From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- files/ru/web/css/calc()/index.html | 125 ------------------------------------- 1 file changed, 125 deletions(-) delete mode 100644 files/ru/web/css/calc()/index.html (limited to 'files/ru/web/css/calc()') diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html deleted file mode 100644 index 66fce5a331..0000000000 --- a/files/ru/web/css/calc()/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Функция calc() -slug: Web/CSS/calc() -tags: - - css calc -translation_of: Web/CSS/calc() ---- -
{{CSSRef}}
- -

calc() - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.

- -

{{EmbedInteractiveExample("pages/css/function-calc.html")}}

- -

Синтаксис

- -

Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:

- -
-
+
-
Сложение
-
-
-
Вычитание.
-
*
-
Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("<number>")}}.
-
/
-
Деление. Делитель должен быть  {{cssxref("<number>")}}.
-
- -

Операнды в expression могут быть различными выражениями {{cssxref("<length>")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.

- -
Внимание: Деление на ноль выдаст ошибку при парсинге HTML.
- -
Note: Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение calc(50% -8px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как calc(50% - 8px) - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.
-Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.
- -
-
- -

Формальный синтаксис

- -
calc(expression)
- -

Примеры

- -

Позиционирование объекта в окне с помощью отступа

- -

calc() делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. 

- -
.banner {
-  position: absolute;
-  left: 5%;                 /* для браузеров не поддерживающих calc() */
-  left: calc(40px);
-  width: 90%;               /* для браузеров не поддерживающих calc() */
-  width: calc(100% - 80px);
-  border: solid black 1px;
-  box-shadow: 1px 2px;
-  background-color: yellow;
-  padding: 6px;
-  text-align: center;
-}
-
- -
<div class="banner">Это баннер!</div>
- -

{{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}

- -

Автоматическое изменение размера формы ввода для соответствия размеру контейнера

- -

В следующем случае calc() помогает обеспечить не выпадание полей формы за края блока, задав отступ.

- -

Давайте посмотрим некоторый код CSS:

- -
input {
-  padding: 2px;
-  display: block;
-  width: 98%;               /* для браузеров, не поддерживающих calc() */
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: 130px;             /* для браузеров, не поддерживающих calc() */
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
-
- -

Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать  размер полей, мы вновь используем функцию calc(), которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:

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

{{ EmbedLiveSample('Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера', '100%', '80') }}

- -

Вложенный calc() с CSS переменными

- -

Вы также можете использовать calc() с CSS переменными. Рассмотрим пример кода:

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

Спецификации

- -{{Specifications}} - -

Поддержка браузерами

- -

{{Compat}}

- -

Смотрите также

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