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()	計算平面中兩個數字的三角反正切。	試試看

列印頁面