Математические функции 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);
}