CSS Математические функции
Математические 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() | Использует наименьшее значение из списка значений, разделенных запятыми, в качестве значения свойства |