Функция calc()

Опубликовано: 7 июля 2015 Обновлено: 6 января 2020 0 комментариев

Функция сalc() позволяет использовать в качестве значений свойств математические выражения со:

  • сложением +
  • вычитанием -
  • умножением *
  • делением /

Допустимыми значениями являются:

  • длина cm, mm, in, pt, pc, px
  • частота Hz, kHz
  • угол deg, grad, rad, turn
  • время s, ms
  • процентные значения %
  • положительные и отрицательные числа

Все вычисления производятся в соответствии с правилами приоритета операторов. Нельзя складывать значения, заданные разными единицами измерения. Между операторами обязательны пробелы с обеих сторон: 

div {
position: absolute; 
left: calc(100% - 20px);
}
div {
width: calc(100% - 50% / 2);
}

О проблемах, возникающих при использовании функции сalc() в LESS/SASS, вы можете прочитать здесь и здесь.

IE Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Chrome for Android
10
9 частично		 31 31 7 30 7.1 — 40
4.4 частично		 42

Практическое применение

С помощью функции сalc() удобно позиционировать изображения:

div {background-position: calc(100% - 10px) calc(100% - 10px), calc(0% + 10px) calc(0% + 10px);}

See the Pen QKjgOY by Elena (@html5book) on CodePen.

А также задавать одинаковую ширину элементам и позиционировать элементы по центру блока:

div {width: calc(100% / 3);}

See the Pen rrOwYX by Elena (@html5book) on CodePen.

Поделиться: