css height屬性中的calc方法詳解

什么是calc()?
學習calc()之前,我們有必要先知道calc()是什么?只有知道了他是個什么東東?在實際運用中更好的使用他。
calc()從字面我們可以把他理解為一個函數(shù)function。其實calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能,用來指定元素的長度。比如說,你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動態(tài)值。為何說是動態(tài)值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上,可以通過calc()計算得到元素的寬度。
例如父盒子是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ù)用于動態(tài)計算長度值。
- 需要注意的是,運算符前后都需要保留一個空格,例如:width: calc(100% - 10px);
- 任何長度值都可以使用calc()函數(shù)進行計算;
- calc()函數(shù)支持 "+", "-", "*", "/" 運算;
- calc()函數(shù)使用標準的數(shù)學運算優(yōu)先級規(guī)則;
支持版本:CSS3
語法
calc(expression)
值 | 描述 |
---|---|
expression | 必須,一個數(shù)學表達式,結(jié)果將采用運算后的返回值。 |
到此這篇關(guān)于css height屬性中的calc方法的文章就介紹到這了,更多相關(guān)css height屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
css中的計算函數(shù)calc在網(wǎng)站布局中一個示例
這篇文章主要介紹了css中的計算函數(shù)calc在網(wǎng)站布局中一個示例的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下2019-08-12CSS使用calc()獲取當前可視屏幕高度的實現(xiàn)
這篇文章主要介紹了CSS使用calc()獲取當前可視屏幕高度的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編2020-07-14- 數(shù)學表達式calc()是CSS中的函數(shù),主要用于數(shù)學運算。這篇文章給大家介紹了CSS中的數(shù)學表達式calc()的相關(guān)知識,感興趣的朋友一起看看吧2020-01-19
- 這篇文章主要介紹了淺析CSS中calc()的使用的相關(guān)資料,需要的朋友可以參考下2016-05-10
- CSS3新增的函數(shù)中有一個非常好用的函數(shù),就是calc()函數(shù),用過的都說好,這篇文章我們來嘮一老calc函數(shù),感興趣的朋友一起看看吧2022-06-23