CSS Математические функции
Math функции 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% или 300 пикселей:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
Попробуйте сами »
Функция min()
Функция min() использует наименьшее значение из списка значений, разделенных запятыми, в качестве значения свойства.
CSS Синтаксис
min(value1, value2, ...)
| Значение | Описание |
|---|---|
| value1, value2, ... | Требуемый. Список значений, разделенных запятыми, где выбирается наименьшее значение |
Давайте посмотрим пример:
Пример
Используйте min(), чтобы установить ширину #div1 в зависимости от того, какое значение является наименьшим, 50% или 300 пикселей:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Попробуйте сами »
Все Math функции CSS
| функции | Описание |
|---|---|
| calc() | Позволяет выполнять вычисления для определения значений свойств CSS |
| max() | Использует наибольшее значение из списка значений, разделенных запятыми, в качестве значения свойства |
| min() | Использует наименьшее значение из списка значений, разделенных запятыми, в качестве значения свойства |