css height屬性中的calc方法詳解
我要評(píng)論什么是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)
| 值 | 描述 |
|---|---|
| expression | 必須，一個(gè)數(shù)學(xué)表達(dá)式，結(jié)果將采用運(yùn)算后的返回值。 |
到此這篇關(guān)于css height屬性中的calc方法的文章就介紹到這了,更多相關(guān)css height屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css中的計(jì)算函數(shù)calc在網(wǎng)站布局中一個(gè)示例
這篇文章主要介紹了css中的計(jì)算函數(shù)calc在網(wǎng)站布局中一個(gè)示例的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下2019-08-12CSS使用calc()獲取當(dāng)前可視屏幕高度的實(shí)現(xiàn)
這篇文章主要介紹了CSS使用calc()獲取當(dāng)前可視屏幕高度的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2020-07-14深入理解CSS中的數(shù)學(xué)表達(dá)式calc()
數(shù)學(xué)表達(dá)式calc()是CSS中的函數(shù)，主要用于數(shù)學(xué)運(yùn)算。這篇文章給大家介紹了CSS中的數(shù)學(xué)表達(dá)式calc()的相關(guān)知識(shí)，感興趣的朋友一起看看吧2020-01-19- 這篇文章主要介紹了淺析CSS中calc()的使用的相關(guān)資料,需要的朋友可以參考下2016-05-10
- CSS3新增的函數(shù)中有一個(gè)非常好用的函數(shù)，就是calc()函數(shù)，用過的都說好，這篇文章我們來嘮一老calc函數(shù)，感興趣的朋友一起看看吧2022-06-23
