搜尋

CSS 數學計算 ( 函式類型 )

CSS 雖然只是樣式語言,但也提供了一些好用的函式,讓使用者能更有彈性的設計畫面,這篇教學會介紹「數學計算」相關的 CSS 函式,例如 calc()、min()、max()、minmax()、三角函數等等,透過動態計算的方式,取得並設定動態改變的數值。

CSS 教學 - CSS 函式 ( 數學計算 )

「數學計算」的 CSS 函式

下方列出「數學計算」類型的 CSS 函式 ( 目前主流瀏覽器都支援 ):

數學計算函式 說明
calc() 基本數學運算。
round() 四捨五入。
clamp() 限制數值範圍。
max()、min() 最大值與最小值。
hypot() 參數平方和。
mod()、rem() 餘數。
exp()、log() 指數與對數。
pow()、sqrt() 次方與平方根。
sin()、cos()、tan()、asin()、acos()、atan()、atan2() 三角函數。
maxmin() grid 網格排版最大值與最小值。
repeat() grid 網格排版重複設定。

calc()

calc()」是「基本數學運算」CSS 函式,也是最常使用的 CSS 函式之一,通常應用在「動態計算長寬尺寸」,並支援與其他函式一起使用,基本寫法如下:

div {
  width: calc(100% - 200px);  /* 100% 的父元素寬度減 200px */
}
nav {
  width: calc(100% / 5);      /* 100% 的父元素寬度除以 5 */
}

calc() 的使用方法和限制如下:

  • 僅支援「加減乘除」四則運算,混合使用時,先乘除,後加減
  • 運算符號「前後需要加上空格」,例如 calc(5px - 2px)calc(5px + -2px)
  • 加減需要加上「單位」,例如 calc(5px + 2px)
  • 運算需要的「單位」可以是 %、em、pt、px、vw...等 CSS 標準單位。
  • 乘除的「其中一項」必須是「無單位」,例如 calc(5px * 2)
  • 0 也需要加上單位,例如 calc(5px + 0px)

下方的範例執行後,使用滑鼠拖拉黑色 div 方框,就可以看見內容的 nav 尺寸跟著變化,並且永遠與右側保持 20px,與下方保持 50px 距離。

線上展示:https://codepen.io/oxxo/pen/vYwyBKM

<!-- HTML 程式碼 -->
<div>
  <nav></nav>
</div>

<!-- CSS 程式碼 -->
<style>
div {
  border: 1px solid #000;
  width:200px;
  height:200px;
  resize: both;
  overflow: auto;
}
nav {
  width: calc(100% - 20px);  /* 父元素寬度的 100% 減 20px */ 
  height: calc(100% - 50px); /* 父元素高度的 100% 減 50px */ 
  background: red;
}
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - calc()

round()

round()」是「進位退位數學運算」CSS 函式,可以使用指定的參數和區間,將動態數值進行四捨五入、無條件捨去或進位...等數學運算,使用方法如下:

width: round(模式, 原始數值, 數值間隔);

下表列出 round() 的參數說明:

  • 模式 ( 非必須 ):
    • up:無條件進位到最接近的整數倍數。
    • down:無條件捨去到最接近的整數倍數。
    • nearest:預設值,四捨五入到最接近的整數倍數 ( 預設值 )。
    • to-zero:四捨五入到最接近 0 的整數倍數。
  • 動態數值 ( 必須 ):具有單位的數字,不可為 0。
  • 數值間隔 ( 必須 ):具有單位的數字,不可為 0。

下方的範例執行後,使用滑鼠拖拉黑色 div 方框,就可以看見內容的 nav 寬度採用 50 為區間的方式四捨五入,高度採用 20px 為區間的方式四捨五入 ( 拖拉時會有「跳動現象」,因為區間使用 50px 或 20px )。

線上展示:https://codepen.io/oxxo/pen/GRaNRRq

<!-- HTML 程式碼 -->
<div>
  <nav></nav>
</div>

<!-- CSS 程式碼 -->
<style>
div {
  border: 1px solid #000;
  width:200px;
  height:200px;
  resize: both;
  overflow: auto;
}
nav {
  width: round(100%, 20px);  /* 父元素寬度的 100%,但四捨五到最接近 20px 倍數的整數 */ 
  height: round(100%, 50px); /* 父元素高度的 100%,但四捨五到最接近 50px 倍數的整數 */ 
  background: red;
}
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - round()

clamp()

clamp()」是「限制數值區間」CSS 函式,運用「最小值、動態數值和最大值」三個參數,鎖定數值要呈現的區間,使用方法如下:

width: clamp(最小值, 動態數值, 最大值);

clamp() 的三個參數都是必填參數,下表列出相關說明:

  • 最小值:具有單位的數字,動態數值小於最小值,則以最小值呈現。
  • 動態數值:具有單位的數字。
  • 數值間隔:具有單位的數字,動態數值大於最大值,則以最大值呈現。

下方的範例執行後,使用滑鼠拖拉黑色 div 方框,就可以看見內容的 nav 寬度和高度最多只會到 150px,最小只會是 30px 。

線上展示:https://codepen.io/oxxo/pen/ExzNxjM

<!-- HTML 程式碼 -->
<div>
  <nav></nav>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width:200px;
    height:200px;
    resize: both;
    overflow: auto;
  }
  nav {
    width: clamp(30px, 100%, 150px);
    height: clamp(30px, 100%, 150px);
    background: red;
  }
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - clamp()

min()、max()

min()」是「數字裡的最小值」CSS 函式,「max()」表示「數字裡的最大值」,使用方法如下:

width: min(數值 A、數值 B、數值 C....); /* 取得數值 A、B、C 裡的最小值 */
width: max(數值 A、數值 B、數值 C....); /* 取得數值 A、B、C 裡的最大值 */

下方的範例執行後,使用滑鼠拖拉黑色 div 方框,就可以看見內容的 nav 寬度會從「「10% 父元素寬度、100px 和 50% 畫面高度」裡選出最大值,而 nav 高度則會從「10% 父元素高度、100px 和 50% 畫面寬度」裡選出最小值,此處的 50% 畫面高度與寬度並沒有寫相反,而是希望透過瀏覽器畫面的改變,呈現更明顯的效果。

線上展示:https://codepen.io/oxxo/pen/BaeQarJ

<!-- HTML 程式碼 -->
<div>
  <nav></nav>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width:200px;
    height:200px;
    resize: both;
    overflow: auto;
  }
  nav {
    width: max(10%, 100px, 50vh);
    height: min(50%, 100px, 50vw);
    background: red;
  }
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - min()、max()

hypot()

hypot()」是「參數的平方和」CSS 函式,內容可以放入一個以上具有「單位」的數值,使用方法如下:

width: hypot(3px, 4px);  /* 3x3+4x4=25,25 的平方根為 5 */
width: hypot(3px, 4px, 5px);  /* 3x3+4x4+5x5=50,50 的平方根為 7.0710678118654 px */

下方的範例執行後,畫面中會出現三個 div,每個 div 的邊長等於前一個 div 的對角線長。

線上展示:https://codepen.io/oxxo/pen/OJYbevg

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid black;
    margin: 10px;
    float: left;
  }
  .a {
    width: 50px;
    height: 50px;
  }
  .b {
    width: hypot(50px, 50px);
    height: hypot(50px, 50px);
  }
  .c {
    width: hypot(hypot(50px, 50px), hypot(50px, 50px));
    height: hypot(hypot(50px, 50px), hypot(50px, 50px));
  }
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - hypot()

mod()、rem()

mod()rem()」是「餘數」CSS 函式,兩者用法完全相同,使用時放入「A、B」兩個具有「單位」的參數,會自動計算「A 除以 B的餘數」,餘數支援小數點,使用方法如下:

margin: rem(14.5%, 3%);     /* 2.5% */
margin: rem(18px, 5px);     /* 3px */
margin: rem(10rem, 6rem);   /* 4rem */
margin: rem(14.5%, 3%);     /* 2.5% */
margin: rem(18px, 5px);     /* 3px */
margin: rem(10rem, 6rem);   /* 4rem */

下方的範例執行後,畫面中會出現兩個 div,分別使用 mod()rem() 函式計算和外圍間距。

線上展示:https://codepen.io/oxxo/pen/pomNWob

<!-- HTML 程式碼 -->
<div id="box">
  <div>a</div>
  <div>b</div>
</div>

<!-- CSS 程式碼 -->
<style>
  #box {
    border: 1px solid black;
    width: 200px;
    height: 200px;
  }
  #box div {
    width: 100px;
    height: 50px;
    background: pink;
    margin: mod(100%, 15%)
  }
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - mod()、rem()

exp()、log()

exp()」是「指數函數」CSS 函式,具有一個參數,參數通常使用 -1、0 或 1,使用後會回傳這個參數的指數函數數值,「log()」表示「對數函數」,具有一個必填參數與一個選填底數 ( 預設對數底 ),使用後會根據參數計算回傳對數函數數值,因為 exp()log() 計算後的數值「沒有單位」,所以只能搭配 calc() 等計算函式使用「乘法或除法」,使用方法如下:

with: calc(100px * exp(num)); 
with: calc(100px * log(num, 10));  

下方的範例執行後,畫面中會出現兩個 div,分別使用 exp()log() 函式計算寬度。

線上展示:https://codepen.io/oxxo/pen/BaeQyyO

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border:1px solid #000;
    height:100px;
  }
  .a {
    width: calc(100px * exp(1));  /* 100px * 2.71828 = 270px */
  }
  .b {
    width: calc(100px * log(5,2)); /* 100px * 2.32192 = 232px */
  }
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - exp()、pow()

pow()、sqrt()

pow()」是「次方函數」CSS 函式,具有兩個參數 A 和 B,使用後會回傳 A 的 B 次方,「sqrt()」表示「平方根函數」,具有一個參數,使用後會回傳這個參數的平方根,因為 pow()sqrt() 計算後的數值「沒有單位」,所以只能搭配 calc() 等計算函式使用「乘法或除法」,使用方法如下:

with: calc(100px * pow(A, B));
with: calc(100px * sqrt(num));

下方的範例執行後,畫面中會出現兩個 div,分別使用 pow()sqrt() 函式計算寬度。

線上展示:https://codepen.io/oxxo/pen/eYaBGZR

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border:1px solid #000;
    height:100px;
    margin:10px;
  }
  .a {
    width: calc(20px * pow(2, 3));  /* 20 x 8 = 160px */
  }
  .b {
    width: calc(20px * sqrt(16));   /* 20px * 4 = 80px */
  }
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - pow()、sqrt()

sin()、cos()、tan()、asin()、acos()、atan()、atan2()

sin()cos()tan()」是「回傳數字的三角函數」CSS 函式,主要針對長度或尺寸使用,具有一個帶有「角度單位」的參數,角度單位支援「角度 deg」、「旋轉方向 turn」和「徑度 rad」,使用方法如下:

with: calc(100px * sin(60deg));
with: calc(100px * cos(60deg));
with: calc(100px * tan(60deg));

asin()acos()atan()」表示「回傳角度的三角函數」,主要針對旋轉的角度使用,具有一個「沒有單位」的參數,參數範圍通常是「-1~1」之間,也可使用「9999」或 「-9999」表示無窮大或無限小,使用方法如下:

transform: rotate(asin(1));
transform: rotate(acos(1));
transform: rotate(atan(1));

atan2(y, x)」也是「回傳角度的三角函數」,具有兩個「單位類型相同」的參數 ( 例如 px 和 vx 因為最終結果都是 px,屬於同類型的單位 ),主要透過座標比例的計算求得角度,使用方法如下:

transform: rotate(atan2(3, 2));
transform: rotate(atan2(1rem, -0.5rem));
transform: rotate(atan2(20%, -30%));
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));

下方的範例執行後,畫面中會出現三個 div,分別使用不同的三角函數計算出寬度或旋轉角度。

線上展示:https://codepen.io/oxxo/pen/MWdbYpY

<!-- HTML 程式碼 -->
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border:1px solid #000;
    height:50px;
    width:50px;
    margin:20px;
    float:left;
  }
  .box-1 {
    width: calc(100px * sin(60deg));
  }
  .box-2 {
    transform: rotate(acos(0.5));
  }
  .box-3 {
    transform: rotate(atan2(-1, 0.5));
  }
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - sin()、cos()、tan()、asin()、acos()、atan()、atan2()

minmax()

minmax()」是「大小範圍區間」CSS 函式,具有「min」和「max」兩個參數,其中一個需為「動態數值」,需要和網格排版 grid 一同使用,可以限制「由內容撐開的寬度」的最小值和最大值,使用方法如下:

grid-template-columns: minmax(最小值、最大值);

下方的範例執行後,黑色 div 方框中會出現一個簡單的三格網格,使用滑鼠拖拉黑色 div 方框,網格的第一格「最小值和內容相同,最大值 100px」,第二格「最小值 200px,最大值 100%」,第三格為「150px」。

線上展示:https://codepen.io/oxxo/pen/NWVbWEB

<!-- HTML 程式碼 -->
<div>
  <div id="container">
    <div>oxxo</div>
    <div>apple</div>
    <div>banana</div>
  </div>    
</div>

<!-- CSS 程式碼 -->
<style>
  body > div {
    width:300px;
    height:100px;
    resize: both;
    overflow: auto;
    border: 1px solid #000
  }

  #container {
    display: grid;
    grid-template-columns: minmax(min-content, 100px) minmax(200px, 100%) 150px;
    border:1px solid red;
  }

  #container div {
    border:1px solid red;
    background:pink;
  }
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - minmax()

repeat()

repeat()」是「網格的重複設定」CSS 函式,具有「重複次數」和「數值」兩個參數:

參數 說明
重複次數 數字、auto-fillauto-fit,設定 auto-fillauto-fit 時會在抵達重複數值最後一項後換行。
數值 類似陣列的一串數字,代表每個網格的寬度。

repeat()() 通常和網格排版 grid 一同使用,使用方法如下:

grid-template-columns: repeat(3, 30px 60px 90px); /* 不斷重複後方三個數值 */
grid-template-columns: repeat(auto-fill, 30px 60px 90px); /* 不斷重複後方三個數值,超過三個會換行 */
grid-template-columns: repeat(auto-fit, 30px 60px 90px);  /* 不斷重複後方三個數值,超過三個會換行,用法和 auto-fill 幾乎相同 */

下方的範例執行後,畫面中會有六個粉色的 div,按照「30px、60px、90px」的寬度重複,因為有設定 auto-fill,所以每次重複結束後就會換行。

線上展示:https://codepen.io/oxxo/pen/WNBoEVb

<!-- HTML 程式碼 -->
<div id="container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

<!-- CSS 程式碼 -->
<style>
  #container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 30px 60px 90px);
    grid-gap: 5px;
    height: 100px;
    width: 100%;
    background-color: green;
    padding: 10px;
  }

  #container > div {
    background-color: pink;
    padding: 5px;
  }
</style>

CSS 教學 - CSS 函式 ( 數學計算 ) - repeat()

小結

「數學計算」相關的 CSS 函式最主要都是應用在「版面動態計算」,例如在電腦版版的某些位置比較大,但在行動裝置裡比較小之類的狀況,通常一個「calc()」函式就可以處理大部分的狀況,如果真的有其他需求,不妨也可以使用看看其他的 CSS 函式,減少一些 JavaScript 的動態計算呦。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則 CSS 常用樣式屬性

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 使用巢狀結構語法 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

全域關鍵字與文字數值 長度與角度單位 位置名稱與時間單位 特殊樣式屬性 ( all、appearance)

規則與定義

變數 ( Variables ) 媒體查詢 ( @media ) 容器查詢 ( @container ) 自訂屬性值 ( @property ) 匯入樣式 ( @import ) 分層優先順序 ( @layer ) 定義字型 ( @font-face ) 計數規則 ( @counter-style ) 列印網頁 ( @page )

函式類型

數學計算 文字與清單計數 形狀與線段 路徑 ( path ) 生成內容與引號

顏色與濾鏡

顏色單位 色彩模型 漸層色 影像濾鏡 ( filter ) 背景濾鏡 ( backdrop-filter ) 混合模式 ( mix-blend-mode )

文字與段落

設定字型 ( font-family ) 使用外部字型 文字尺寸 文字樣式 ( 常用 ) 文字樣式 ( 其他實用 ) 文字樣式 ( 特殊用途 ) 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 文字自動分欄 使用 Icon Font ( 圖示文字 ) 製作自己的 Icon Font

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬高尺寸 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 ( border-radius ) 影像邊框 ( border-image ) 輪廓 ( outline ) 內容溢出與裁切 ( overflow ) 內容範圍 ( contain ) 可見性與透明度

背景與陰影

背景 ( 背景色、背景裁切 ) 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 ( shape-* ) 定位 ( position ) 邏輯屬性 ( logical properties ) 重置 CSS ( Reset CSS ) 水平置中技巧 垂直置中技巧

Flex 彈性排版

Flexbox 彈性盒子 Flex 對齊方式 Flex 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 自訂動畫路徑 ( offset ) 動畫觸發事件 多重動畫的權重與順序 動畫進度控制 ( timeline )

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask ) 物件填滿方式與定位 轉換函式 ( transform ) 平移、旋轉與縮放 3D 轉換與透視

視窗與使用者行為

捲軸樣式 ( scrollbar ) 拉霸、滑桿樣式 ( slider ) 滑鼠游標圖示 ( cursor ) 滑鼠事件 ( pointer-events ) 使用者選取 ( user-select ) 捲動行為 ( scroll、overscroll ) 列印換頁 ( break-* )

CSS 預處理器

認識 CSS 預處理器 Less ( 安裝、開始使用 ) Less ( 巢狀結構、選擇器 ) Less ( 變數、import ) Less ( Extend、Mixin ) Less ( 邏輯、迴圈、函式 )

範例效果

CSS 圓餅圖 CSS 跑馬燈 Google 載入動畫 電子時鐘數字 漸層色的轉場與動畫 漸層色製作星空背景 漸層色邊框 漸層色製作圖案背景 不規則形狀動畫 彈跳的正方形動畫 3D 正多面體 超連結底線動畫效果 噁心黏黏球效果 CSS 視差滾動效果 捲軸控制放射形選單 捲軸改變文字背景色 CSS 頁面捲動進度條 CSS 水波效果 圓點載入動畫 ( 陰影動畫 ) 字母翻牌效果 探照燈動畫 立體雙色跑馬燈 樓梯文字動態效果 漸層色文字、雙色文字 空心文字、文字水波背景 左右傾斜的背景效果 Icon 圖示形狀變換 故障文字效果 按鈕的多種 hover 效果 點擊展開或收折的選單 點擊愛心圖案放射效果 純 CSS 碼表 ( 可計時 )