css3中的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()函数可以使用数字属性值来执行加、减、乘、除，四则运算。具体而言，它可以被使用在<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()函数的兼容性

　　1.jpg

　　可以看出浏览器对于calc()函数的支持度还是不错的。

　　而对于不支持的浏览器来说，calc()函数将会把整个表达式给忽略掉。这就意味着我们将必须提供一个静态值给不支持的浏览器使用。

　　.demo{

　　width:90%;/*非支持浏览器设置静态值*/

　　width:calc(100%-50px);

　　}

关于“css3中的calc()函数有什么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。