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 – канал! Если у вас остались вопросы, обязательно пишите их в комменты или на форуме!

0

Автор публикации

не в сети 37 минут

Vapi

0
Комментарии: 20Публикации: 70Регистрация: 14-04-2017

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *