CSS — функция calc

CSSВ css есть функция calc. Она позволяет применять некоторые арифметические операции для расчета каких либо свойств, применяемых к объекту. Всем привет! Сегодня мы научимся правильно пользоваться калькулированием в css. Штука весьма полезная, интересная и занимательная. Позволяет решить некоторые задачи, где хардкодом не обойтись.

CSS — функция calc

Что это за функция? Повторюсь — она позволяет вычислять арифметикой любые свойства, у которых есть размер. Изображения, падинги, маргины, ширина, высота и т.д. Пример:

Обратите внимание, что внутри функции мы отнимаем от 100% ширины 20 пикселей. И самое интересное это сработает. В целом в этом и состоит вся уникальность данной функции. То же самое можно сделать и наоборот, например, ширина блока 1000 пикселей. От этой ширины можно отнять 30%, в результате у вас получится примерно 333,33 пикселя и т.д. К сожалению, функция calc в css имеет ограниченное количество арифметических операций:

  • Сложение(+) — height: calc(5px + 10px);
  • Вычитание(-) — width: calc(1000px — 10%);
  • Умножение(*) — padding: calc(20%*2);
  • Деление(/) — как и везде на ноль делить нельзя. width: calc(30%/3);

Что стоит учесть: арифметические знаки обязательно должны быть экранированы пробелами, т.е.:

В противном случае функция может не сработать. НО! Данном правило применяется только для плюса и минуса, а остальные в этом не нуждаются.

Примечание: если значение функции не может быть вычислено, то оно игнорируется.

Из дополнительных материалов:

  • есть информация, что в псевдоэлементах after и before функция не работает! Поэтому будьте внимательны при написании функции calc в своем css файле.
  • если вы пишите на less (надстройка над css), то функцию необходимо экранировать так: width: calc(~»100% + @{gutter}»);

Новое!

На это собственно все! Мы постарались собрать для вас как можно больше материалов, по данной функции, чтобы немного выйти за рамки данной темы, но держать ее в центре внимания. Спасибо за уделенное время! Ставьте лайки, пишите комментарии, регистрируйтесь, подписывайтесь на нашу группу в ВК и Youtube — канал! Если у вас остались вопросы, обязательно пишите их в комменты или на форуме!

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

Опиши свой кейс здесь, если у тебя остались вопросы и мы обязательно ответим...