CSS - 数学函数

CSS 数学函数允许您直接在 CSS 样式表中执行数学计算。这些函数可用于操作长度、角度、颜色等值。

div{
    width: calc(100% - 40px); 
    /* 100% width minus 40px for padding */
    
    width: max(200px, 50%);
    /* Set width to the maximum value between 
    200px and 50% of the viewport width */
}

CSS 中的数学函数类型

CSS 中可以使用几种类型的数学函数。它们包括

**基本算术函数** 这包括用于对数值进行计算的 `calc()` 函数。
**比较函数** 这包括用于比较变量的 `min()`、`max()` 和 `clamp()` 函数。
**阶梯值函数** 这包括用于根据舍入策略计算舍入数字的 `round()` 函数。
**三角函数** 这些函数（例如 `sin()`、`cos()` 和 `tan()`）将正弦、余弦和正切等数学函数引入样式表。

calc 函数

**calc()** 函数是 CSS 中的基本算术函数，允许您对数值进行计算。它可以通过执行加、减、乘、除等数学运算来动态修改属性值。

示例

这是一个演示 `calc()` 函数用法的示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            border: 1px solid #000;
            padding: 20px;
        }

        .box {
                /* 100% width minus 40px for padding */
            width: calc(100% - 40px); 

                /* 100% of viewport height minus 20px for padding */
            height: calc(100% - 20px); 

            background-color: lightblue;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            This box uses the CSS calc() function to dynamically 
            calculate its width and height.
        </div>
    </div>
</body>

</html>

max 函数

**max()** 函数是 CSS 中的比较函数，允许您从给定值列表中确定最大值。它可以用于比较变量并根据最大值应用条件样式。

示例

这是一个演示 `max()` 函数用法的示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            border: 1px solid #000;
            padding: 20px;
        }

        .box {
                /* Set the width to the maximum value between 
                   200px and 50% of the viewport width */
            width: max(200px, 50%);
            background-color: lightblue;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            This box uses the CSS max() function to set its width 
            to the maximum value between 200px and 50% of the 
            viewport width.
        </div>
    </div>
</body>

</html>

min 函数

**min()** 函数是 CSS 中的比较函数，允许您从给定值列表中确定最小值。它可以用于比较变量并根据最小值应用条件样式。

示例

这是一个演示 `min()` 函数用法的示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            border: 1px solid #000;
            padding: 20px;
        }

        .box {
                /* Set the width to the minimum value between 
                   200px and 50% of the viewport width */
            width: min(200px, 50%);
            background-color: lightblue;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            This box uses the CSS min() function to set its width 
            to the minimum value between 200px and 50% of the 
            viewport width.
        </div>
    </div>
</body>

</html>

比较函数

CSS 比较函数使值的评估更容易，允许根据样式表中的比较进行条件样式。

下表列出了比较函数

函数	描述	示例
min()	确定给定值集中最小值。	试试看
max()	确定给定值列表中的最大值。	试试看
clamp()	计算最小值、中间值和最大值的中间值。	试试看

阶梯值函数

阶梯值函数通过在 CSS 中启用属性值的精确更改和离散跳跃，提供对样式表的粒度控制。

下表列出了阶梯值函数

函数	描述	示例
round()	根据舍入策略计算舍入数字。	试试看

三角函数

CSS 三角函数通过将正弦、余弦和正切等数学函数引入样式表，允许进行更复杂的 desain 更改。

下表列出了三角函数

函数	描述	示例
sin()	计算数字的三角正弦。	试试看
cos()	计算数字的三角余弦	试试看
tan()	计算数字的三角正切。	试试看
asin()	计算数字的三角反正弦。	试试看
acos()	计算数字的三角反余弦。	试试看
atan()	计算数字的三角反正切。	试试看
atan2()	计算平面中两个数字的三角反正切。	试试看

打印页面