calc如何用？css3calc()函数的运用总结
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()函数在各种状况下都是很实用的，大家可以本人动手试试看，加深了解，但愿能对大家的学习有所帮忙。
