Ознакомление с функцией calc() в CSS
Функция calc()
в CSS – это простой способ выполнить простые математические действия прямо в CSS стилях без использования, например, языка программирования PHP. Функция умеет работать с четырьмя простыми математическими операторами: сложение (+), вычитание (—), умножение (*) и деление (/). С помощью функции calc()
вы можете рассчитать значения свойств CSS прямо во время их определения.
Пример синтаксиса функции calc()
/* свойство: calc(математическое действие); */width: calc(100% - 35px);
Математическое действие, которое можно выполнить для выражения, может принимать следующие формы:
+
(сложение). Пример:width: calc(25px + 75px);
-
(вычитание). Пример:padding-top: calc(50px - 7%);
*
(умножение). Пример:line-height: calc(20% * 2);
/
(деление). Пример:margin: calc(35% / 2);
Замечания по использованию функции calc()
- Знаки плюс и минус должны быть отделены от значений пробелами с двух сторон. Выражение
calc(100% -35px)
будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (неверное выражение), в то время как выражениеcalc(100% - 35px)
– будет интерпретировано как вычитание из процентов определенное количество пикселей (т.е., это будет правильное выражение). - Операторы * и / не требуют отделения от операндов пробелами, но это не запрещено и даже приветствуется для лучшей читаемости
- Вы можете использовать разные единицы измерения для каждого из операндов. Чтобы указать желаемый порядок вычисления, вы можете использовать скобки.
- Если значение не может быть вычислено, оно игнорируется.
- Деление на ноль выдаст ошибку при парсинге HTML.
Когда можно использовать calc()
Функция calc()
становится крайне полезной, когда одно из значений является относительной единицей (например, %), а другое – фиксированной. Это свойство очень часто применяется в адаптивном веб-дизайне.
Пример использования: позиционирование объекта с помощью отступа
В примере ниже мы позиционируем блок на всю ширину окна, с отступами по краям в 40px при любом размере девайса.
.block { position: absolute; width: 85%; /* для браузеров, которые не поддерживают calc() */ width: calc(100% - 50px); padding: 15px; border: 1px #000 solid; }
Поддержка функции calc() браузерами
Поддержка на удивление довольно хорошая.
- Firefox до версии 16.0 поддерживает значение
-moz-calc
. - Chrome до версии 26.0 поддерживает значение
-webkit-calc
. - Safari с версии 6.0 поддерживает значение
-webkit-calc
. - На мобильных устройствах Android только с 67+, iOS только на 6.0+, а Opera Mini пока не поддерживает эту функцию.
Последние посты
Как выбрать идеальный ноутбук: Полный гайд
Выбор ноутбука может быть сложной задачей в мире, где рынок переполнен вариантами на любой вкус… Читать далее
Томас Эдисон
Наша самая большая слабость заключается в том, что мы быстро сдаемся. Самый верный способ добиться… Читать далее
Самые красивые и впечатляющие мосты со всего мира (ТОП-10)
Мост — это нечто большее, чем просто сооружение, соединяющее два берега. Для того, чтобы появился… Читать далее
Соломон
Жизнь нас учит, что свою пару мы познаем, когда разводимся, своих братьев мы познаем, когда… Читать далее
Чак Паланик
Кто может — тот делает. Кто не может — тот критикует Чак Паланик Читать далее
Ричард Бах
Ни одно желание не дается тебе отдельно от силы, позволяющей его осуществить. Хотя, возможно, для… Читать далее