css height属性中的calc方法详解

  发布时间:2021-06-03 15:49:56   作者:佚名   我要评论
大家都知道Calc方法有个很大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度,本文通过一个例子给大家详细介绍,需要的朋友参考下吧

什么是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)

描述
expression 必须,一个数学表达式,结果将采用运算后的返回值。

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

相关文章

  • CSS中的line-height行高属性学习教程

    line-height对于页面中字体的行距等排版方面的效果至关重要,这里为大家整理了CSS中的line-height行高属性学习教程,包括line-height的各种取值设定等方面,需要的朋友可以参
    2016-06-06
  • 深入理解CSS height属性设置元素的高度

    下面小编就为大家带来一篇深入理解CSS height属性设置元素的高度。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-13
  • CSS中的line-height行高属性的使用技巧小结

    这篇文章主要介绍了CSS中的line-height属性的使用技巧,文中同时给出了line-height使用中经常出现的文字重叠问题的解决方法,需要的朋友可以参考下
    2016-02-02
  • CSS中行高line-height属性的一些使用技巧

    这篇文章主要介绍了CSS中行高line-height属性的一些使用技巧,包括为每行文本指定不同颜色和文本中间添加线时用到的一些操作方法,需要的朋友可以参考下
    2015-08-21
  • css line-height属性的使用技巧

    本文介绍下,css中的line-height属性的用法,通过实例学习css line-height属性的具体用法,感兴趣的朋友参考下
    2014-08-02
  • css属性行高line-height的用法详解

    本文介绍下css中的line-height属性的用法,通过实例学习css line-height属性的具体用法,感兴趣的朋友参考下
    2014-08-02

最新评论