calc() CSS

Функция calc() может быть использована везде, где применимы <length>, <frequency>, <angle>, <time>, <number>, или <integer>.

С помощью calc() вы можете проводить вычисления, чтобы задавать значения CSS свойств.

Функция **`calc()`** может быть использована везде, где применимы [`<length>`](/css/data-type-length/), [`<frequency>`](/css/data-type-frequency/), [`<angle>`](/css/data-type-angle/), [`<time>`](/css/data-type-time/), [`<number>`](/css/data-type-number/), или [`<integer>`](/css/data-type-integer/). С помощью `calc()` вы можете проводить вычисления, чтобы задавать значения CSS свойств.
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Values and Units Module Level 3](https://drafts.csswg.org/css-values-3/#calc-notation)
Поддержка браузерами:

Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.

Поддержка браузерами:
<p class="ciu_embed" data-feature="calc" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=calc">Can I Use calc?</a> Data on support for the calc feature across the major browsers from caniuse.com. </p>

Синтаксис

/* property: calc(expression) */
width: calc(100% - 80px);

Синтаксис

/* property: calc(expression) */ width: calc(100% - 80px);

Значения

  • expression — математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:
  • + — Сложение
  • - — Вычитание
  • * — Умножение. По крайней мере хоть один из сомножителей должен быть <number>
  • / — Деление. Делитель должен быть <number>

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

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

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

Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.

Значения

* `expression` -- математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы `+`, `-`, `*`, `/` с использованием стандартных правил приоритета операторов: * `+` -- Сложение * `-` -- Вычитание * `*` -- Умножение. По крайней мере хоть один из сомножителей должен быть `<number>` * `/` -- Деление. Делитель должен быть `<number>` Операнды в `expression` могут быть различными выражениями длины. Вы можете использовать единицы измерения для каждого из операндов, если пожелаете. Вы также можете использовать скобки, чтобы указать порядок вычисления. Внимание: Деление на ноль выдаст ошибку при парсинге HTML. Замечание: Операторы `+` и `-` всегда должны быть отеделены пробелом. Выражение `calc(50% -8px)` распарсится как величина в процентах и следующей за ним отрицательное число в пикселях, хотя на самом деле имелось ввиду вычитание 8 пикселей из 50 процентов. Операторы `*` и `/` не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.

Примеры

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

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">This is a banner!</div>

Примеры

### Позиционирование объекта в окне с помощью отступа `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">This is a banner!</div>

Содержание

  • Синтаксис
      /* property: calc(expression) */ width: calc(100% - 80px);
  • Значения
    • Примеры
      • Позиционирование объекта в окне с помощью отступа
      • ### Позиционирование объекта в окне с помощью отступа `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">This is a banner!</div>

    В начало