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

CSS математические функции позволяют использовать математические выражения в качестве значений свойств. В этой главе мы будем讲解 calc(),max() и min() Функция.

Функция calc()

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

Синтаксис CSS

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

Давайте посмотрим на пример:

Пример

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

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

Попробуйте сами

Функция max()

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

Синтаксис CSS

max(value1, value2, ...)
Значение Описание
value1, value2, ... Обязателен. Список значений, разделенных запятыми, - выберите наибольшее значение.

Давайте посмотрим на пример:

Пример

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

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

Попробуйте сами

Функция min()

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

Синтаксис CSS

min(value1, value2, ...)
Значение Описание
value1, value2, ... Обязателен. Список значений, разделенных запятыми, — выберите наименьшее значение

Давайте посмотрим на пример:

Пример

Использование min() Установите ширину #div1 в 50% или в минимальное значение между 50% и 300px:

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

Попробуйте сами

Референс CSS функций

Для получения полного списка всех функций CSS обратитесь на наш Руководство по функциям CSS.