calc是什么意思？怎么使用？本篇文章给大家带来的内容是介绍css3中的calc()函数是什么，有什么用，如何使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
css3中的calc()是什么？可以做什么？
calc()从字面看我们可以把它理解为一个function函数。其实calc就是英文单词calculate(计算)的缩写；它是一个css3新增的功能，可以用来指定元素的长度，动态计算长度值。（推荐学习：CSS3手册）
在CSS3中calc()函数可以允许我们对属性值执行数学运算。
例如，我们可以使用calc()函数指定宽度值为两个或更多数值相加的结果，而不是把元素宽度值声明为一个静态像素值。
立即学习“前端免费学习笔记（深入）”；
.demo { width: calc(100px + 50px);}
为什么要使用calc()？
如果你使用过像sass这样的css预处理器的话，那么你可能会遇到如下的例子：
.demo{ width: 100px + 50px;}// 使用SASS变量$width-one: 100px;$width-two: 50px;.bar { width: $width-one + $width-two;}
然而，calc()函数提供了一个很好的解决方案，它有两个好处。首先，我们可以组合不同的单位。具体来说，就是我们可以混合使用各种单位来进行计算，如百分比、px、em、rem等单位都可以混在一起使用。例如，我们可以创建一个表达式，它将从百分比值中减去像素值。
.demo { width: calc(100% - 50px);}
在此示例中，.demo元素的宽度始终小于其父宽度的100％。
其次，使用calc()后，计算值是表达式本身，而不是表达式的结果值。这样在使用css预处理器执行数学表达式时，给予浏览器的值是表达式的结果值。
// 在SCSS中指定值.demo { width: 100px + 50px;}// 浏览器中编译的CSS及其计算值.demo { width: 150px;}
使用calc()函数，浏览器解析的值是实际的calc()表达式。
// 在CSS中指定值.demo { width: calc(100% - 50px);}//浏览器的计算值.demo { width: calc(100% - 50px);}
这意味着浏览器中的值可以更加动态，并且可以随着视图的变化而改变。我们可以有一个元素(值为：视图高度减去绝对值)，它会随着视图的变化而改变。
calc()函数的使用
calc()函数可以使用数字属性值来执行加、减、乘、除，四则运算。具体而言，它可以被使用在，，，
这里有一些例子 ：
.demo { width: calc(50vmax + 3rem); padding: calc(1vw + 1em); transform: rotate( calc(1turn + 28deg) ); background: hsl(100, calc(3 * 20%), 40%); font-size: calc(50vw / 3);}
注：
使用“+”和“-”时，其前后必须要有空格，如”widht: calc(12%+5em)”这种没有空格的写法是错误的；
使用“*”和“/”时，其前后可以没有空格，但建议留有空格。
calc()嵌套使用
calc()函数可以嵌套使用。但是，内部函数将被视为简单的括号表达式。举例来说，以下嵌套表达式 ：
.demo { width: calc( 100% / calc(100px * 2) );}
相当于：
.demo { width: calc( 100% / (100px * 2) );}
下面我们通过一个简单的例子来看看calc()函数的使用
示例：居中元素（假设.demo盒子的高度和宽度都为300px）
.demo { position: absolute top: calc(50% - 150px); left: calc(50% - 150px);}
这就相当于：
.demo { position: absolute; top: 50%; left: 50%; marging-top: -150px; margin-left: -150px;}
calc()函数的兼容性
可以看出浏览器对于calc()函数的支持度还是不错的。
而对于不支持的浏览器来说，calc()函数将会把整个表达式给忽略掉。这就意味着我们将必须提供一个静态值给不支持的浏览器使用。
.demo{width: 90%; /*非支持浏览器设置静态值*/width: calc(100% - 50px);}
总结：calc()函数在各种情况下都是很有用的，大家可以自己动手试试看，加深理解，希望能对大家的学习有所帮助。
相关推荐：
1、 创想鸟视频教程：CSS3教程
2、创想鸟特效下载：css3特效代码
以上就是calc怎么用？css3 calc()函数的使用总结的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612994.html
微信扫一扫 
支付宝扫一扫 
