В css есть функция calc. Она позволяет применять некоторые арифметические операции для расчета каких либо свойств, применяемых к объекту. Всем привет! Сегодня мы научимся правильно пользоваться калькулированием в css. Штука весьма полезная, интересная и занимательная. Позволяет решить некоторые задачи, где хардкодом не обойтись.
CSS — функция calc
Что это за функция? Повторюсь — она позволяет вычислять арифметикой любые свойства, у которых есть размер. Изображения, падинги, маргины, ширина, высота и т.д. Пример:
|
1 2 3 |
.someclass { max-width: calc(100% - 20px); } |
Обратите внимание, что внутри функции мы отнимаем от 100% ширины 20 пикселей. И самое интересное это сработает. В целом в этом и состоит вся уникальность данной функции. То же самое можно сделать и наоборот, например, ширина блока 1000 пикселей. От этой ширины можно отнять 30%, в результате у вас получится примерно 333,33 пикселя и т.д. К сожалению, функция calc в css имеет ограниченное количество арифметических операций:
- Сложение(+) — height: calc(5px + 10px);
- Вычитание(-) — width: calc(1000px — 10%);
- Умножение(*) — padding: calc(20%*2);
- Деление(/) — как и везде на ноль делить нельзя. width: calc(30%/3);
Что стоит учесть: арифметические знаки обязательно должны быть экранированы пробелами, т.е.:
|
1 |
calc(число(пробел)+(пробел)число) |
В противном случае функция может не сработать. НО! Данном правило применяется только для плюса и минуса, а остальные в этом не нуждаются.
Примечание: если значение функции не может быть вычислено, то оно игнорируется.
Из дополнительных материалов:
- есть информация, что в псевдоэлементах after и before функция не работает! Поэтому будьте внимательны при написании функции calc в своем css файле.
- если вы пишите на less (надстройка над css), то функцию необходимо экранировать так: width: calc(~»100% + @{gutter}»);
Новое!
На это собственно все! Мы постарались собрать для вас как можно больше материалов, по данной функции, чтобы немного выйти за рамки данной темы, но держать ее в центре внимания. Спасибо за уделенное время! Ставьте лайки, пишите комментарии, регистрируйтесь, подписывайтесь на нашу группу в ВК и Youtube — канал! Если у вас остались вопросы, обязательно пишите их в комменты или на форуме!