CSS長度單位

其中常用的有px、%、em、rem，至於其他的，不常用，之前也沒怎麼深入理解。這裡詳細理解一下以下幾個單位:

vw、vh、vm

這幾個單位都是跟視窗有關，vw為視窗寬度，總寬度為100vw，vh為視窗高度，總高度為100vh，vm為視窗寬高的較小值。

所以，1vw相當於視窗寬度的1%，1vh相當於視窗高度的1%。

何為視窗?

“視窗”所指為瀏覽器內部的可視區域大小，即window.innerWidth * window.innerHeight的大小。

相容性

查了下相容性，總體支援還不錯:

CSS時間頻率單位

都比較常見。

CSS角度單位

說下turn吧，其實1turn就是360deg，.5turn就是180deg，有的時候寫起來比較方便，不過像45deg這種角度還是不要寫成turn了。

calc

在很早以前，就知道CSS3有一個計算函式calc()，但一直沒有深入瞭解。今天在別人的部落格上偶然看到了關於calc的詳細介紹，於是燃起了深入瞭解此特性的想法。

什麼是Calc

calc是英文單詞calculate的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。為何說是動態值呢?因為我們使用的表示式來得到的值。不過calc()最大的好處就是用在流體佈局上，可以通過calc()計算得到元素的寬高。

如何使用

calc()使用通用的數學運算規則，但是也提供更智慧的功能：

1. 使用“+”、“-”、“*” 和 “/”四則運算；

2. 可以使用%、px、em、rem等單位；

3. 可以混合使用各種單位進行計算；

4. 表示式中有“+”和“-”時，其前後必須要有空格，如”widht: calc(12%+5em)”這種沒有空格的寫法是錯誤的；

5. 表示式中有“*”和“/”時，其前後可以沒有空格，但建議留有空格。

使用起來其實很簡單，比如:

.box { width: calc(50% + 2em); height: calc(100% - 2em); background-color: #f00; }

相容性

查詢結果來自: https://caniuse.com/#search=calc