--- 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('%D0%9F%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0_%D0%B2_%D0%BE%D0%BA%D0%BD%D0%B5_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%D0%B0', '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('%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D1%84%D0%BE%D1%80%D0%BC%D1%8B_%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0_%D0%B4%D0%BB%D1%8F_%D1%81%D0%BE%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%83_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80%D0%B0', '100%', '80') }}

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

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

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

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

Спецификация Статус Замечания
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}} {{Spec2('CSS3 Values')}}

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

{{CompatibilityTable}}
Функция Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка 19 (WebKit 536.3) {{property_prefix("-webkit")}}
26		 {{CompatGeckoDesktop("2")}} {{property_prefix("-moz")}}
{{CompatGeckoDesktop("16")}}		 9 - 6 {{property_prefix("-webkit")}} (buggy)
7
On gradients' color stops 19 (WebKit 536.3) {{property_prefix("-webkit")}}
27 (maybe 26)		 {{CompatGeckoDesktop("19")}} 9 - 6 {{property_prefix("-webkit")}} (buggy)
7
Функция Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка <= 2.3.6 not supported {{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}
{{CompatGeckoMobile("16")}}		 {{CompatUnknown}} {{CompatUnknown}} <= IOs 6.1.3 not supported
6 {{property_prefix("-webkit")}}
7
On gradients' color stops {{CompatUnknown}} {{CompatGeckoMobile("19")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

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