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

筱筱醬發表於2018-12-18

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

相關文章