Функция calc()
==============

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

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

Синтаксис
---------

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

**+**

Сложение

**-**

Вычитание.

**\***

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

**/**

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

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

**Примечание:** Деление на ноль выдаст ошибку при парсинге HTML.


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


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

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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog