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

筱筱醬發表於2018-12-18
CSS筆記

【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);
複製程式碼

相關文章