CSS calc()函數(shù)與單位vh 常見height:100vh
calc() 函數(shù)屬于CSS3版本內(nèi)容,用于動態(tài)計算長度值。例如:width: calc(* - 10px);需要注意的是,運(yùn)算符前后都需要保留一個空格。calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算;
舉例,給一個div動態(tài)設(shè)置寬度如下:
vh,是指css中相對長度單位,表示相對視口高度(Viewport Height),1vh = 1% * 視口高度。
視口比例長度定義了相對于視口的長度大小,這是文檔的可見部分。
通俗點(diǎn)講,vh就是當(dāng)前屏幕可見高度的1%,也就是說 height:100vh == height:*;
css的calc方法主要用途是什么呢?
1. 執(zhí)行數(shù)學(xué)運(yùn)算
CSS3 的 calc() 函數(shù)允許我們在屬性值中執(zhí)行數(shù)學(xué)操作。例如,我們可以使用 calc() 指定一個元素寬的固定像素值為多個數(shù)值的和。
2. 實(shí)現(xiàn)居中效果
使用 calc() 給我們提供另一個垂直居中元素的解決方案。如果我們知道元素的尺寸,一個典型的解決方案是使用負(fù)外邊距移動自身距離高與寬的一半
3. 創(chuàng)建根柵格尺寸
使用 rem,calc() 函數(shù)能夠用來創(chuàng)建一個基于視口的柵格。我們可以設(shè)置根元素的字體大小作為視口寬度的一部分。
4. 提高計算清晰度
使用 calc(),我們還能做很多的事情,它是 CSS 中很有用的新特性之一。
【轉(zhuǎn)】css3中的width:100vh以及calc(100vh + 10px)
vh: 相對于視窗的高度, 視窗被均分為100單位的vh;
vw: 相對于視窗的寬度, 視窗被均分為100單位的vw;
vmax: 相對于視窗的寬度或高度中較大的那個。其中*的那個被均分為100單位的vmax;
vmin: 相對于視窗的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin;
視區(qū):所指為瀏覽器內(nèi)部的可視區(qū)域大小,
即window./window.大小,不包含任務(wù)欄標(biāo)題欄以及底部工具欄的瀏覽器區(qū)域大小。
calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能,用來指定元素的長度。比如說,你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動態(tài)值。為何說是動態(tài)值呢?因?yàn)槲覀兪褂玫谋磉_(dá)式來得到的值。不過calc()*的好處就是用在流體布局上,可以通過calc()計算得到元素的寬度。
calc是 css3提供的一個在css文件中計算值的函數(shù):
用于動態(tài)計算長度值。
需要注意的是,運(yùn)算符前后都需要保留一個空格,例如:width: calc(* - 10px);
任何長度值都可以使用calc()函數(shù)進(jìn)行計算;
calc()函數(shù)支持 “+”, “-“, “*”, “/” 運(yùn)算;
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級規(guī)則;
calc(100vh - 10px) 表示整個瀏覽器窗口高度減去10px的大小
calc(100vw - 10px) 表示整個瀏覽器窗口寬度減去10px的大小
一般用來設(shè)置流式布局寬高,當(dāng)然,你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動態(tài)值
calc()的兼容性需要注意
calc()函數(shù)要導(dǎo)包嗎
calc()函數(shù)不需要導(dǎo)包,calc()從字面我們可以把他理解為一個函數(shù)function。其實(shí)calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能,用來指定元素的長度。
CSS3 函數(shù)取值calc()他的兼容性,如何處理,,或者說有沒有其他更好的辦法
在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持,同樣需要在其前面加上各瀏覽器廠商的識別符,不過可惜的是,移動端的瀏覽器還沒僅有“firefox for android 14.0”支持,其他的全軍覆沒。