|
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。但它却是就是css3的一部分，下面这篇文章主要给大家介绍了关于css3中calc函数的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
前言
其实在之前学习CSS3的时候，我并没有注意到有calc()这个属性，后来在看一个大牛的代码的时候看到了这个，然后就引发了后来的一系列的查找、学习，以及这篇博客的诞生。好了，废话不多说了，来干正事。
简介
其实，calc()这个形式看起来就很容易让人想到Javascript里的函数，当然他不是js里的函数，但是他有着类似函数的功能，可以用来计算，括号里是一个表达式，通常用calc()来指定元素的长度，不管是width、height、border还是padding等都可以用他来指定。说白了，calc()就是css3的一个指定元素长度的属性，他的特殊之处在于他可以做计算，而且支持混合使用各种单位，比如%、px、em等。所以这个属性特别适用于那些自适应的布局。
兼容性：在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好支持（据说在使用时要加上供应商前缀，但是我测试了一下，不加也是可以用的），但是在移动端的支持不是很好。
正文：
最近在一次项目中我遇到一个很普通的问题，相信大家都会遇到过，我的需求是这样的，我的侧边栏的高度是百分百的，就像下面的例子一样：
这时我要在顶部导航栏上加一些需求，要实现的效果类似于这样，不过想很郁闷它出现了滚动条，效果如下：
我不想它出现滚动条，这个时候可能很多同学会说，我可以用绝对定位等等，但我的顶部导航栏本来就是绝对定位呀，于是乎我翻了一翻css3，发现了一个神奇的函数，calc!!!(啊尼路亚，啊尼路亚，啊尼路亚，啊尼路亚~~~)
下面是一些粗鄙的无聊的复制粘贴过来的函数说明：
calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100vh - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
支持版本：CSS3
兼容性：（开头说了）
回到正事，了解了它的内容，接下来就要看看它能给你带来的好处，比如：消灭滚动条，当我把父级的高度设置成height: calc(100vh - '我的需求内容高度')时滚动条神奇的消失了，呈现了这样的效果:
登登登登~！！！是不是很神奇，为什么会这样呢？因为100vh就相当于window.innerHeight, 是浏览器的内部高度, 滚动条高度也计算在内。如果高只设置100%是可用高度, 就不包含滚动条的高度啦, 是不是非常好用的一个东西(说那么多大家走过路过应施舍点点赞给我，谢谢谢谢~)
其实不仅仅只有高，还有很多很多应用场景都是可以实现的，比如我们经常会给自己的ul li设置padding或者margin，当li的个数没有超过一定的数量时它是不会换到第二行的，但有时候就因为那么一点点padding或者margin就换行了，使得左边或者右边空白了一处很难看，大家都可以用calc这个函数去解决，我就不一一举例了哈，本人技术水平有限，就说到这了，如果有错的地方，希望大家可以多多指出，祝大家级别年年跳，薪资翻又翻。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。 | 
发表于 2018-7-10 15:56:37
