Получи случайную криптовалюту за регистрацию!

Функция calc() в css Отличный инструмент, дающий возможность | Доступная верстка

Функция calc() в css

Отличный инструмент, дающий возможность рассчитать значения свойств CSS во время их определения. В качестве параметра, т.е.в скобках, можно записывать математические выражения +, -, *, /

Часто можно увидеть реализацию для вычисления ширины

width: calc(100% - 50px)

т.е. элемент будет иметь ширину 100% родителя за вычетом 50px

Где еще можно заметить ее использование? Честно говоря, где угодно (где это уместно конечно же): размер шрифта, иногда высота блока, отступы, анимация и т.д.

Необходимо помнить, что функция calc() работает только с числовыми свойствами. Соединять строки

-> content: calc("I" + "am") - нельзя, будет ошибка

-> делить на 0 нельзя, будет ошибка

-> в медиазапросах она тоже не будет работать
@media(max-width: calc(22em - 10px))

Удобный инструмент, если начать им пользоваться )