CSS 數學函式
CSS 數學函式允許將數學表示式用作屬性值。在這裡，我們將解釋 calc()、max() 和 min() 函式。
calc() 函式
calc() 函式執行一個計算，該計算將用作屬性值。
CSS 語法
calc(表示式)
| 值 | 描述 |
|---|---|
| expression | 必需。一個數學表示式。結果將用作值。 可以使用以下運算子： + - * / |
讓我們看一個例子
示例
使用 calc() 計算 <div> 元素的寬度
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
自己動手試一試 »
max() 函式
max() 函式從逗號分隔的值列表中選擇最大的值作為屬性值。
CSS 語法
max(值1, 值2, ...)
| 值 | 描述 |
|---|---|
| 值1, 值2, ... | 必需。一系列逗號分隔的值 - 其中選擇最大的值 |
讓我們看一個例子
示例
使用 max() 將 #div1 的寬度設定為較大的值，即 50% 或 300px
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
自己動手試一試 »
min() 函式
min() 函式從逗號分隔的值列表中選擇最小的值作為屬性值。
CSS 語法
min(值1, 值2, ...)
| 值 | 描述 |
|---|---|
| 值1, 值2, ... | 必需。一系列逗號分隔的值 - 其中選擇最小的值 |
讓我們看一個例子
示例
使用 min() 將 #div1 的寬度設定為較小的值，即 50% 或 300px
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
自己動手試一試 »
所有 CSS 數學函式
| 函式 | 描述 |
|---|---|
| calc() | 允許您執行計算以確定 CSS 屬性值 |
| max() | 使用逗號分隔的值列表中的最大值作為屬性值 |
| min() | 使用逗號分隔的值列表中的最小值作為屬性值 |
