Функции CSS: как работает функция calc()

Development | Amber | Комментировать запись

CSS-функция calc() позволяет производить вычисления прямо внутри CSS. Взглянем на такой пример:

.pirate {
  position: absolute;
  /* lets have the pirate 20px from the left */
  left: calc(50px - 30px);
}

На первый взгляд может показаться, что эта функция абсолютно бесполезна – ведь то же самое можно сделать вручную. Все становится интереснее, когда мы смешиваем и сочетаем единицы измерения:

left: calc(1.5em - 8px);

Еще интереснее использовать эту функцию с процентными значениями. Например, следующая строка устанавливает ширину выбранного элемента на 80 пикселей меньше 100%:

width: calc(100% - 80px);

Обязательно используйте пробелы вокруг операнда. К примеру, нужно писать v1 + v2, а не v1 +v2 или v1+v2.

Функцию calc() можно использовать везде, где вы использовали бы числовые значения (например: width, max-height, margin-left, …)

Функция calc() очень полезна для таких вещей, как вертикальное центрирование, если вы знаете высоту элемента, который хотите центрировать. Для этого достаточно просто добавить к элементу margin-top, который равен 50% высоты окна просмотра минус половина высоты элемента. Допустим, если наш элемент имеет высоту 100 пикселей, мы можем использовать следующее:

.my-element {
  display:block;
  margin-left:auto;
  margin-right:auto;
  /* 50vh = 50% viewport height */
  margin-top: calc( 50vh - 50px );
  width: 200px;
  height: 50px;
}

Если вы хотите проверить поддержку функции calc() в браузерах, посетите эту страницу.

Читайте также: Обрезка изображений в CSS с помощью clip-path