浅谈CSScalc()函数的使用

CSS3的calc()函数允许我们对属性值进行数学运算。例如，我们可以使用calc()将元素宽度的固定像素值指定为多个值的总和。.foo{width:calc(100px+50px);}whycalc()如果你用过CSS预处理器，比如SASS，你可能遇到过上面的例子.foo{width:100px+50px;}$width-one:100px;$width-two:50px;.bar{width:$width-one+$width-two;}但是，calc()函数提供了更好的解决方案。首先，我们能够组合不同的单元。特别是，我们可以混合使用绝对单位（例如百分比和视口单位）和相对单位（例如像素）进行计算。例如，我们可以创建一个用百分比减去像素值的表达式。.foo{width:calc(100%-50px);}在此示例中，.foo元素将始终比其父元素小50px。其次，对于calc()，计算值是表达式本身，而不是表达式的结果。当使用CSS预处理器进行数学运算时，给定值是表达式的结果。.foo{width:100px+50px;}.foo{width:150px;}但是浏览器解释的calc()的值是一个真正的calc()表达式。.foo{width:calc(100%-50px);}.foo{width:calc(100%-50px);}这意味着浏览器中的值可以更灵活地响应视口变化。我们可以给元素设置一个高度，就是视口的高度减去一个绝对值，它会随着视口的变化而调整。使用calc()calc()函数可用于对数字属性执行四种算术运算。例如，、、、、或数据类型。这里有一些例子：.foo{width:calc(50vmax+3rem);填充：计算（1vw+1em）；变换：旋转（计算（1turn+28deg））;背景：hsl（100，计算（3*20%），40%）；font-size:calc(50vw/3);}clac()嵌套calc()函数可以嵌套。在函数内部，它被视为简单的括号表达式，如以下示例所示。.foo{width:calc(100%/calc(100px*2));}函数计算值如下：.foo{width:calc(100%/(100px*2));}fallbackschemeclac()已得到普遍支持。对于不支持calc()的浏览器，整个属性值表达式将被忽略。但是我们可以使用固定值作为不支持calc()的浏览器的回退。.foo{宽度：90%；width:calc(100%-50px);}哪些场景可以使用calc()示例1-居中元素使用calc()为我们提供了另一种垂直居中元素的解决方案。如果我们知道元素的尺寸，一个典型的解决方案是使用负边距将自身移动一半的高度和宽度，像这样：.foo{position:absolutetop:50%;左：50%；边距顶部：-150px；margin-left:-150px;}使用calc()函数，我们可以仅使用top和left属性实现相同的效果：.foo{position:absolutetop:calc(50%-150px);left:calc(50%-150px);}随着Flexbox的引入，很少需要这种方法。但是，也有一些情况不能使用Flexbox。此方法很有用，例如，如果元素需要绝对或固定定位。示例2-创建根网格维度使用rem，calc()函数可用于创建基于视口的网格。我们可以将根元素的字体大小设置为视口宽度的一部分。html{font-size:calc(100vw/30);}1rem现在是视口宽度的1/30。页面上的任何文本都会根据您的视口自动缩放。此外，相同比例的视口将始终显示相同数量的文本，无论视口的实际大小如何。如果我们将rem用于非文本大小调整，它们也遵循此行为。宽度为1rem的元素始终是视口元素宽度的1/30。示例3-清晰度最后，calc()使计算更加清晰。如果你使一组项目的宽度为它们父元素容器宽度的1/6，你可能会这样写：.foo{width:16.666666667%;}但是，它可以更清晰和更具可读性：.foo{width:calc(100%/6);}使用calc()，我们可以做更多的事情，比如创建网格系统。它是CSS最有用的新特性之一。