CSS функция calc()

В CSS есть функция calc(), применяемая для выполнения простых вычислений. Вот пример её использования:

.block{
  /* Вычесть 80px из 100vh */
  width: calc(100vh - 80px);
}

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

Функция хорошо поддерживается, поэтому можно спокойно использовать

Значения

Выражение представляет собой комбинацию значений размеров и следующих знаков математических действий. В круглых скобках мы можем писать любые математические операции с любыми единицами измерения, доступными в вебе (%, px, rem, em, vw, vh, vmin и т.д.). Доступны четыре стандартных операнда:

• + — сложение;
• - — вычитание;
• / — деление;
• * — умножение.

Операторы сложения и вычитания обязательно с двух сторон должны отбиваться пробелом. Иначе браузер воспримет их как часть числа. Хоть операторы деления и умножения не требуют такой строгости к себе, но принято и их тоже отбивать пробелами для удобства чтения.

Информация

1 Единственное место, где вы можете использовать функцию calc() — это значения.

2. Она также может использоваться только для части свойства, например:

.block{
   border-radius: 15px calc(15px / 3) 4px 2px;
}

3. Она может даже быть частью другой функции, которая является частью свойства!

4. calc() нельзя использовать в медиа запросах

Практика

Частая ситуация: в вёрстке три колонки, ширина каждой из которых должна быть ровно третью от 100%. 100% / 3 = 33.3333333333...%. Раньше мы допускали неточность и указывали ширину как 33%. Теперь можно использовать calc() и пусть браузер сам считает.

При отрисовке страницы браузер сам высчитает и подставит значение:

.selector {
  width: calc(100% / 3);
}

Но лучше не перегружать браузер расчётами. На каждую операцию он тратит некую долю секунды и часть оперативной памяти. Если расчётов будет много, то это потенциально повлияет на скорость загрузки страницы. Используйте calc() с умом.

Подробная статья про calc: читать