Функция calc()

Baseline Widely available *

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

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

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

Интерактивный пример

Синтаксис

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

+

Сложение

-

Вычитание.

*

Умножение. По крайней мере хоть один из сомножителей должен быть <number>.

/

Деление. Делитель должен быть <number>.

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

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

calc(expression)

Примеры

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

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

css
.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;
}
html
<div class="banner">Это баннер!</div>

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

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

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

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-коду:

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

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

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

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

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

Specification
CSS Values and Units Module Level 4
# calc-func

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
calc()
Color component support
Gradient color stops support
Nested calc() support
<number> value support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

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