【CSS筆記】— 使用calc()計算寬高（vw/vh）

【CSS筆記】— 使用calc()計算寬高（vw/vh）

calc()是什麼？

簡單來講就是CSS3中新增的一個函數，calculate（計算）的縮寫。用於動態計算寬/高，你可使用calc()給元素的各個屬性設置值【margin、border、padding、font-size】等，

calc()語法

calc的語法就是簡單的四則運算，

1. 使用「+」、「-」、「*」 和 「/」四則運算；
2. 可使用百分比、px、em、rem等單位；
3. 能夠混合使用各類單位進行計算；
4. 表達式中有「+」和「-」時，其先後必需要有空格，如"width: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
5. 表達式中有「*」和「/」時，其先後能夠沒有空格，但建議留有空格。

calc()的用途

主要用於計算不肯定值，例如一個外邊距爲10px,寬度爲100%的元素，這種狀況咱們怎麼設置呢？若是設置了

width: 100%;
margin: 10px;
複製代碼

你能夠看出這個box已經溢出了，那麼怎麼解決呢？就能夠用calc函數了。

width: 800px;
width: calc(100% - (10 *2)px);
margin: 10px;
複製代碼

vw和vh是什麼？

vw、vh、vmin、vmax是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，表明相似於 1%。 視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。

具體描述以下：

1. vw：視窗寬度的百分比（1vw 表明視窗的寬度爲 1%）
2. vh：視窗高度的百分比
3. vmin：取當前Vw和Vh中較小的那一個值
4. vmax：取當前Vw和Vh中較大的那一個值

vw、vh 與 % 百分比的區別

（1）% 是相對於父元素的大小設定的比率，vw、vh 是視窗大小決定的。 （2）vw、vh 優點在於可以直接獲取高度，而用 % 在沒有設置 body 高度的狀況下，是沒法正確得到可視區域的高度的，因此這是挺不錯的優點。

calc和vh/vw結合使用

上面咱們使用%結合calc使用能夠實現想要的效果，爲何要引入vw和vh呢？上面說%和vw,vh的區別中，% 在沒有設置 body 高度的狀況下，是沒法正確得到可視區域的高度的。

calc + vw 計算寬度

width: 800px; /* fallback for b*/
width: -moz-calc(100vw - (2 * 10)px);
width: -webkit-calc(100vw -(2 * 10)px);
width: calc(100vw - (2 * 10)px);
複製代碼

calc + vh 計算高度

height: 800px;
height: -moz-calc(100vh - (2 * 10)px);
height: -webkit-calc(100vh - (2 * 10)px);
height: calc(100vh - (2 * 10)px);
複製代碼