CSS3的calc方法

CSS3的calc()函数允许我们在属性值中执行数学操作。例如，我们可以使用calc()指定一个元素宽的固定像素值为多个数值的和。

使用calc()，计算值是表达式它自己，而不是表达式的结果。当使用CSS预处理器做数学运算时，给定值为表达式的结果。

// 使用calc()方法时，浏览器解析的calc()的值为真实的calc()表达式。
.foo {
	width: calc(100px + 50px);
}
// 浏览器解析的calc的值如下：
.foo {
 	width: calc(100px + 50px);
}

// 当使用CSS预处理器做数学运算时，给定值为表达式的结果。
.foo {
 	width: 100px + 50px;
}
// CSS预处理器解析后的值如下：
.foo {
 	width: 150px;
}

calc()函数可以用来对数值属性执行四则运算。
比如，长度，角度，时间，数值或者整数数据类型。
特别是，我们可以混合计算绝对单位（比如百分比与视口单元）与相对单位（比如像素）。例如，我们可以创造一个表达式，用一个百分比减掉一个像素值。

calc()方法可以嵌套
calc()函数可以嵌套。在函数里边，会被视为简单的括号表达式，如下例所示。

.foo{
	width: calc（100% / calc（100px * 2））;
}
// 函数的计算值如下所示：
.foo{
	width: calc（100% /（100px * 2））;
}

对于不支持calc()的浏览器，整个属性值表达式将被忽略。不过我们可以对那些不支持calc()的浏览器，使用一个固定值作为降级方案。

.foo{
	width: 90%；
	width: calc（100% - 50px）；
}

. foo{
	position:  absolute top: calc(50% - 150px); 
	left:  calc(50% - 150px);
	top:  calc(50% - 150px);
}

Flexbox的介入，已经很少需要这种方法了。不过，一些情况下Flexbox不能被使用。比如，元素需要绝对定位或者固定定位，这种方法是有用的。

使用rem，calc()函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小为视口宽度的一部分。

html {
	font-size:calc（100vw / 30）；
}

现在，1rem为视口宽度的1/30。在页面上的任何文本，将会根据你的视口自动缩放。更进一步，相同比例的视口总会显示相同的文本数量，不管视口的真实尺寸是多少。
如果我们对非文本使用rem设置大小，它们同样遵守这个行为。一个1rem宽度的元素总是视口元素宽度的1/30。

最后，calc()使计算更加清晰。如果你使一组项目为它们父元素容器宽度的1/6，你可能这么写：

.foo{
	width：16.666666667%；
}

然而，它能够更加清晰并具有可读性：

.foo{
	width: calc（100% / 6）；
}

使用calc()，我们还能做更多的事情，比如创建一个棚格系统。它是CSS最有用的新特性之一。