Математические CSS функции позволяют использовать математические выражения в качестве значений свойств. На данной странице вы узнаете о функциях calc(), max() и min().
CSS функция calc()
CSS функция calc() выполняет вычисление, которое будет использоваться в качестве значения свойства.
CSS синтаксис функции calc()
calc(expression)
| Значение | Описание |
|---|---|
| expression | Требуемый. Математическое выражение. Результат будет использоваться в качестве значения. Могут быть использованы следующие операторы: + - * / |
Давайте посмотрим пример:
Используйте CSS функцию calc() для вычисления ширины элемента <div>:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
Попробуйте сами »
CSS функция max()
CSS функция max() использует наибольшее значение из списка значений, разделенных запятыми, в качестве значения свойства.
CSS синтаксис функции max()
max(value1, value2, ...)
| Значение | Описание |
|---|---|
| value1, value2, ... | Требуемый. Список значений, разделенных запятыми, где выбирается наибольшее значение |
Давайте посмотрим пример:
Используйте max(), чтобы установить ширину #div1 в зависимости от того, какое значение является наибольшим, 50% или 300 пикселей:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
Попробуйте сами »
CSS функция min()
CSS функция min() использует наименьшее значение из списка значений, разделенных запятыми, в качестве значения свойства.
CSS синтаксис функции min()
min(value1, value2, ...)
| Значение | Описание |
|---|---|
| value1, value2, ... | Требуемый. Список значений, разделенных запятыми, где выбирается наименьшее значение |
Давайте посмотрим пример:
Используйте min() , чтобы установить ширину #div1 в зависимости от того, какое значение является наименьшим, 50% или 300 пикселей:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Попробуйте сами »
Все математические CSS функции
| функции | Описание |
|---|---|
| calc() | Позволяет выполнять вычисления для определения значений свойств CSS |
| max() | Использует наибольшее значение из списка значений, разделенных запятыми, в качестве значения свойства |
| min() | Использует наименьшее значение из списка значений, разделенных запятыми, в качестве значения свойства |