什么是calc()?

學(xué)習(xí)calc()之前，我們有必要先知道calc()是什么？只有知道了他是個(gè)什么東東？在實(shí)際運(yùn)用中更好的使用他。

calc()從字面我們可以把他理解為一個(gè)函數(shù)function。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫，是css3的一個(gè)新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動(dòng)態(tài)值。為何說是動(dòng)態(tài)值呢?因?yàn)槲覀兪褂玫谋磉_(dá)式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計(jì)算得到元素的寬度。

例如父盒子是100%的高度

盒子里面的head部分固定位140px
內(nèi)容部分始終為剩余的全部高度
height: calc(100% - 140px);    "+或-"兩邊要有空格 不然不生效

父盒子.pushQueryPanelContainer{
  height: 100%;
}
內(nèi)容部分
.pushQueryPanelContainer .queryTable{
  height: calc(100% - 55px);
  margin-left: 10px;
  margin-right: 10px;
}

calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長度值。

• 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)；
• 任何長度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；
• calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；
• calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；

支持版本：CSS3

語法

　　calc(expression)

到此這篇關(guān)于css height屬性中的calc方法的文章就介紹到這了,更多相關(guān)css height屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論