译自How calc() Works - written by Ire Aderinokun
CSS3的calc()函数给我们提供了计算属性值的数学运算方法。不需要声明，例如，用静态像素值来表示一个元素的宽，我们可以用calc()指定宽度是两个或两个以上的数值相加的结果。
.foo {
width: calc(100px + 50px);
}
为什么使用 calc()?
如果你使用过css预处理器，比如SASS，像上面那个例子，相信你是使用过的。
.foo {
width: 100px + 50px;
}
// 使用 SASS 变量
$width-one: 100px;
$width-two: 50px;
.bar {
width: $width-one + $width-two;
}
然而， calc()函数提供了更为遍历的解决方案。首先，可以使用两个不同的单位进行运算。特别的是，我们可以混合相对单位（例如百分比、窗口单位）和绝对单位（像素）。例如，我们可以创建一个表达式，百分比减去一个像素值。
.foo {
width: calc(100% - 50px);
}
在这个例子中，在父元素宽度基础上，.foo这个元素总会比100%少50像素。
再者，计算值是表达式本身,而不是结果值的表达式。用CSS预处理程序在做数学表达式,给浏览器的是表达式的结果值。
// 在 SCSS 中的值
.foo {
width: 100px + 50px;
}
// 显示在浏览器中的值
.foo {
width: 150px;
}
// 在 CSS 中的值
.foo {
width: calc(100% - 50px);
}
// 显示在浏览器中的值
.foo {
width: calc(100% - 50px);
}
这就表明了，浏览器中的值是可变的，当窗口大小改变时。我们有一个元素的高度是窗口高度减去一个绝对值，并随着窗口的高度变化而变化。
使用cal()
cal()函数可以进行加减乘除的运算。CSS函数calc()可以用在任何一个需要<length>、<frequency>, <angle>、<time>、<number>、或<integer>的地方。有了calc()，你就可以通过计算来决定一个CSS属性的值了。
.foo {
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);
}
嵌套使用cal()
cal()函数可以被嵌套使用。然而,内部函数将被视为简单的括号表达式。
.foo {
width: calc( 100% / calc(100px * 2) );
}
计算过后的值为
.foo {
width: calc( 100% / (100px * 2) );
}
浏览器支持
cal()能被大多数浏览器所支持。
can I use
对于那些不支持
cal()的浏览器，这个值将被忽略，那么我们很容易就能提供一个降级的方法。
.foo {
width: 90%; /* Fallback for older browsers */
width: calc(100% - 50px);
}
什么时候使用 cal()?
例1-居中元素
cal()函数给我们提供了另一种解决元素居中问题的方法。如果我们知道子元素的尺寸,一个典型的解决方案是给margin设置负值。
// 假设 .foo 的宽高都是300px
.foo {
position: absolute
top: 50%;
left: 50%;
marging-top: -150px;
margin-left: -150px;
}
使用cal()函数将更简便
.foo {
position: absolute
top: calc(50% - 150px);
left: calc(50% - 150px);
}
通过引入Flexbox,这样的方法不是很必要。然而,在这种情况下,Flexbox不能被使用,如果需要绝对定位的元素或固定的,这种方法是可行的。
例2 - 创建一个根网格大小
cal()函数可以被用于创建基于窗口的网格的单位-rem。我们可以设置一个根元素的字体大小为窗口宽度的一部分。
html {
font-size: calc(100vw / 30);
}
现在，1rem为1/30的窗口宽度。任何文字在我们页面上都会基于窗口大小自动变化。
qm15jd
如果我们给页面中其他非文本元素也使用rem单位,他们也将遵循这一行为。一个元素的宽度1rem总是窗口宽度的1/30。
例3 - 清晰明了
最后，cal()函数可以用于做任何计算，使它更加清晰明了。例如,如果你想要使一系列元素的宽度为父容器的1/6,你可以这样写
.foo {
width: 16.666666667%;
}
然而,这将是使别人理解其他更简单
.foo {
width: calc(100% / 6);
}
还有很多事情是可以用cal()函数做的，例如创建一个网格系统(Creating a Grid System)。这绝对是一个在CSS中最有用的新特性。
网友评论