Математические функции CSS позволяют создавать математические выражения. используются в качестве стоимости недвижимости. Здесь мы объясним calc(), max() и min().
calc()Функция calc() выполняет расчет, который будет использоваться в качестве значения свойства.
calc(expression)Необходимый. Математическое выражение. Результат будет использоваться в качестве значения.
Можно использовать следующие операторы: + - * /
Давайте посмотрим на пример:
Используйте Calc() для вычисления ширины элемента <div>:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
} Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<h1>The calc() Function</h1>
<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>
</body>
</html>
max()Функция max() использует наибольшее значение, из списка значений, разделенных запятыми, в качестве значения свойства.
max(value1, value2, ...)Необходимый. Список значений, разделенных запятыми, где указано наибольшее значение. выбранный
Давайте посмотрим на пример:
Используйте max(), чтобы установить ширину #div1 в зависимости от того, какое значение больше: 50% или 300 пикселей:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
} Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
</style>
</head>
<body>
<h1>The max() Function</h1>
<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>
<div id="div1">Some text...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
min()Функция min() использует наименьшее значение, из списка значений, разделенных запятыми, в качестве значения свойства.
min(value1, value2, ...)Необходимый. Список значений, разделенных запятыми, где указано наименьшее значение. выбранный
Давайте посмотрим на пример:
Используйте min(), чтобы установить ширину #div1 в зависимости от того, какое наименьшее значение: 50% или 300 пикселей:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
} Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
</style>
</head>
<body>
<h1>The min() Function</h1>
<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>
<div id="div1">Some text...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Позволяет выполнять вычисления для определения значений свойств CSS.
Использует наибольшее значение из списка значений, разделенных запятыми, в качестве стоимость имущества
Использует наименьшее значение из списка значений, разделенных запятыми, в качестве стоимость имущества