css height属性中的calc方法详解_CSS教程_CSS_网页制作_

什么是calc()?

学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

例如父盒子是100%的高度

盒子里面的head部分固定位140px
内容部分始终为剩余的全部高度
height: calc(100% - 140px);    "+或-"两边要有空格 不然不生效

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

calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；

支持版本：CSS3

语法

　　calc(expression)

到此这篇关于css height属性中的calc方法的文章就介绍到这了,更多相关css height属性内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！