Математические функции CSS

Математические функции CSS позволяют в качестве значений свойств использовать математические выражения. Здесь мы рассмотрим функции calc(), max() и min().


Функция calc()

Функция calc() осуществляет вычисления, результаты которых затем используются в качестве значения CSS свойства.

CSS синтаксис

calc(выражение)
Значение Описание
выражение Обязательно. Математическое выражение. Результат будет использоваться как значение CSS свойства.
Можно использовать следующие операторы: + - * /

Пример

Используем calc(), чтобы вычислить ширину элемента <div>:


#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Функция max()

Функция max() возвращает наибольшее значение из разделенного запятой списка значений, которое затем используется в качестве значения CSS свойства.

CSS синтаксис

max(значение1, значение2, ...)
Значение Описание
значение1, значение2, ... Обязательно. Разделенный запятой список значений, из которого отбирается самое большое значение.

Пример

Используем max(), чтобы установить ширину элемента #div1, выбирая, что больше 50% или 300px:


#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

Функция min()

Функция min() возвращает наименьшее значение из разделенного запятой списка значений, которое затем используется в качестве значения CSS свойства.

CSS синтаксис

min(значение1, значение2, ...)
Значение Описание
значение1, значение2, ... Обязательно. Разделенный запятой список значений, из которого отбирается самое маленькое значение.

Пример

Используем min(), чтобы установить ширину элемента #div1, выбирая, что меньше 50% или 300px:


#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}