什么是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() 函数用于动态计算长度值。

支持版本：CSS3

语法

　　calc(expression)

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS中li标签横向排列的方法是什么？

  在CSS中我们常常会使用到li标签，因为li标签用途很广泛，它可以用来制作列表，选项卡，导航等等。但是li是块级元素，我们想要实现横向排列，究竟该怎样做呢？下文给大家分享了两种方法，有需要的朋友可以参考，那么接下就跟小编来学习一下吧。

• CSS怎样实现鼠标移过弹出介绍的商品展示效果？

  这篇文章给大家分享的是用CSS怎样实现鼠标移过弹出介绍的商品展示效果，这种商品展示效果比较常见，小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起学习一下吧。

• CSS中什么方法实现动态区域裁剪的效果

  本篇文章带大家了解一下CSS3 clip-path（裁剪路径），介绍一下如何利用 clip-path 实现动态区域裁剪，希望对大家有所帮助！

• 在CSS中实现隐藏文字有几种方法

  有时候，我们会用图片代替文字，最常用的就是用在input按钮上。以前，我都会用text-indent:-9999px将文字移到页面外面，但这个方法在IE6下有个bug，不属于块元素的应用此css属性后，此块的内容也会消失，这时候需要将这块内容设置为块元素（display:block;）.最近，我习惯给一些固定长宽的元素使用line-height:999em进行移 ...

• HTML列表的主要标记怎样表示，用法是什么

  HTML列表的主要标记怎样表示，用法是什么？在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。