Функция calc() в css
Отличный инструмент, дающий возможность рассчитать значения свойств CSS во время их определения. В качестве параметра, т.е.в скобках, можно записывать математические выражения
+, -, *, /
Часто можно увидеть реализацию для вычисления ширины
width: calc(100% - 50px)
т.е. элемент будет иметь ширину 100% родителя за вычетом 50px
Где еще можно заметить ее использование? Честно говоря, где угодно (где это уместно конечно же): размер шрифта, иногда высота блока, отступы, анимация и т.д.
Необходимо помнить, что функция calc() работает только с
числовыми свойствами. Соединять строки
-> content: calc("I" + "am") - нельзя, будет ошибка
->
делить на 0 нельзя, будет ошибка
-> в медиазапросах она тоже не будет работать
@media(max-width: calc(22em - 10px))
Удобный инструмент, если начать им пользоваться )