編碼的世界 / 優質文選 / 生涯

css3新發現height:100vh;


2022年6月28日
-   

vh/vw vh: 相對於視窗的高度, 視窗被均分為100單位的vh; vw: 相對於視窗的寬度, 視窗被均分為100單位的vw;
vmax: 相對於視窗的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax; vmin: 相對於視窗的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin; 視區所指為瀏覽器內部的可視區域大小,  即window.innerWidth/window.innerHeight大小,不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。
calc  calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能,用來指定元素的長度。比如說,你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上,可以通過calc()計算得到元素的寬度。
calc是 css3提供的一個在css文件中計算值的函數:
  • 用於動態計算長度值。
  • 需要注意的是,運算符前後都需要保留一個空格,例如:width: calc(100% - 10px);
  • 任何長度值都可以使用calc()函數進行計算;
  • calc()函數支持 “+”, “-“, “*”, “/” 運算;
  • calc()函數使用標准的數學運算優先級規則;

calc(100vh - 10px) 表示整個瀏覽器窗口高度減去10px的大小
calc(100vw - 10px) 表示整個瀏覽器窗口寬度減去10px的大小

  • 1
  • 2

一般用來設置流式布局寬高,當然,你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值
calc()的兼容性如下,使用時需注意:

熱門文章