calc怎么用?css3 calc()函数的使用总结
发布日期:2021-06-21 05:17:43 浏览次数:4 分类:技术文章

本文共 2090 字,大约阅读时间需要 6 分钟。

calc是什么意思?怎么使用?本篇文章给大家带来的内容是介绍css3中的calc()函数是什么,有什么用,如何使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先小编在这里谢谢大家一直的支持,每天都会更新十个web前端基础内容,需要的可以关注我,另外也可以进我的web学习交流群,领取资料学习资料笔记,可以跟里面的小伙伴一起学习一起成长,不懂的问题也可以问我,随时给大家解答。再次感谢大家。

css3中的calc()是什么?可以做什么?

calc()从字面看我们可以把它理解为一个function函数。其实calc就是英文单词calculate(计算)的缩写;它是一个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()函数可以使用数字属性值来执行加、减、乘、除,四则运算。具体而言,它可以被使用在<length>,<frequency>,<angle>,<time>,<number>,<integer>等数据类型中。

这里有一些例子 :

.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怎么用?css3 calc()函数的使用总结的详细内容,更多请关注我!

转载地址:https://blog.csdn.net/lin123_00/article/details/105938317 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:HTML怎么设置下划线?html文字加下划线方法
下一篇:CSS字体透明度怎么设置?

发表评论

最新留言

不错!
[***.144.177.141]2024年04月16日 01时03分28秒