CSS3 calc()函数允许我们对属性值执行数学运算。 例如，声明一个元素宽度的静态像素值，而不是使用calc()来指定宽度是添加两个或多个数值的结果。
.foo { width: calc(120px + 50px); }
像SASS这样的CSS预处理器
.foo { width: 120px + 50px; } // Or using SASS variables
$width-one: 120px;
$width-two: 50px;
.bar { width: $width-one + $width-two; }
然而， calc()函数提供了一个更好的解决方案有两个原因。 首先， 我们可以组合不同的单位 。 具体来说，我们可以将相对单位（如百分比和视口单位）与像素等绝对单位相混合。 例如，我们可以创建一个从百分比值中减去像素值的表达式。
.foo { width: calc(100% – 50px); }
在此示例中， .foo元素将始终具有比父宽度的100％小50像素的宽度。
第二，使用calc() ， 计算的值是表达式本身 ，而不是表达式的结果值。 当使用CSS预处理器进行数学表达式时，给浏览器的值是表达式的结果值。
// Value specified in SCSS
.foo { width: 100px + 50px; } // Compiled CSS and computed value in browser
.foo { width: 150px; }
但是，使用calc() ，浏览器解析的值是实际的calc()表达式。
// Value specified in CSS
.foo { width: calc(100% – 50px); }
这意味着浏览器中的值可以更加动态，并且随着视口的变化而适应。 我们可以有一个具有视口高度的元素减去一个绝对值，并且它会随着视口的变化而适应。
使用calc()
calc()函数可用于使用数值属性值执行加法，减法，乘法和除法运算。 具体来说，它可以与<length> ， <frequency> ， <angle> ， <time> ， <number>或<integer> 数据类型一起使用 。
这里有几个例子 –
.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); }
calc()函数可以嵌套。 然而，内部函数将被视为简单的括号表达式。 以下列嵌套表达式为例：
.foo { width: calc( 100% / calc(100px * 2) ); }
该函数的计算值如下：
.foo { width: calc( 100% / (100px * 2) ); }
对calc()的浏览器支持比较普遍。
对于不支持calc()作为值的浏览器，整个property-value表达式将被忽略。 这意味着我们可以轻松提供将由不支持浏览器使用的备用静态值。
.foo { width: 90%; /* Fallback for older browsers */ width: calc(100% – 50px); }
什么时候可以使用calc() ？
calc()函数可以在各种情况下使用。
示例1 – 居中元素
使用calc()为我们提供了另一种解决方案，解决了在容器内水平和垂直居中对齐元素的古老问题。 如果我们知道子元素的尺寸，典型的解决方案是使用负边距将元素的高度和宽度移动一半，如下所示：
// Assuming .foo is 300px height and 300px width
.foo { position: absolute top: 50%; left: 50%; marging-top: -150px; margin-left: -150px; }
使用calc()函数，我们可以使用仅在顶部和左侧的属性实现所有这些。
.foo { position: absolute top: calc(50% – 150px); left: calc(50% – 150px); }
随着Flexbox的引入，这样的方法不太可能需要。 但是，在不能使用Flexbox的情况下，例如，如果元素需要绝对定位或固定，则此方法可能很有用。
示例2 – 创建根网格大小
calc()函数可用于在rem单元中创建基于视口的网格。 我们可以通过将根元素的font-size设置为完整视口宽度的一小部分来实现。
html { font-size: calc(100vw / 30); }
现在， 1rem将与视口宽度的1/30相关。 对于我们页面上的任何文本，这意味着它将根据视口进行自动缩放。 此外，给定与视口相同的维度，不管视口的实际尺寸如何，相同数量的文本将始终在屏幕上。
如果我们使用rem单位在页面上设置其他非文本元素，他们也将遵循此行为。 宽度为1rem的元素将始终为视口宽度的1/30。
示例3 – 清晰度
最后， calc()可以用于使任何计算更加明显。 例如，如果您想要一组项目的父容器的宽度的1/6，您可以这样写 –
.foo { width: 16.666666667%; }
不过，上面的CSS可以写成下面这种方式，更方便CSS阅读。
.foo { width: calc(100% / 6); }
有更多的事情我们可以使用calc() ，如创建一个网格系统 。 这绝对是CSS中最有用的新功能之一。
转载请注明：TUTERM.COM » css中calc的正确使用方式
