Функция calc()

Функция сalc() позволяет задавать вычисляемые значения css-свойств. С помощью данной функции можно осуществлять следующие математические операции:
сложение +
вычитание -
умножение *
деление /

Функцию сalc() можно использовать для вычисления следующих типов значений:
размеров cm, mm, in, pt, pc, px
углов deg, grad, rad, turn
времени s, ms
и прочих числовых значений.

Все вычисления производятся в соответствии с правилами приоритета операторов. Нельзя складывать значения, заданные разными единицами измерения. Между операторами обязательны пробелы с обеих сторон:

div {
position: absolute; 
left: calc(100% - 20px);
}

или

div {
width: calc(100% - 50% / 2);
}

О проблемах, возникающих при использовании функции сalc() в LESS/SASS, вы можете прочитать здесь и здесь.

IE Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Chrome for Android
10
9 частично
31 31 7 30 7.1 40
4.4 частично
42

Практическое применение

С помощью функции сalc() удобно позиционировать изображения:

div {background-position: calc(100% - 10px) calc(100% - 10px), calc(0% + 10px) calc(0% + 10px);}

See the Pen QKjgOY by Elena (@html5book) on CodePen.

А также задавать одинаковую ширину элементам и позиционировать элементы по центру блока:

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

See the Pen rrOwYX by Elena (@html5book) on CodePen.