css calc函数用法_CSS3 calc（）函数简介

在之前有关CSS预处理程序的文章中，我们讨论了如何使用其特殊功能来计算长度 。 说实话，我们还可以使用名为calc()的新函数在CSS3中执行类似的操作。 在这篇文章中，我们将在样式表中了解如何利用此功能。

使用calc（）函数

如上所述，我们可以使用calc()确定长度，例如width ， height ， margin ， padding ， font-size等。要进行测量，我们可以使用数学表达式：加法，减法，除法和乘法。

例如，假设包装中包含三个<div> ，如下所示。

<div class="col one">A</div>
<div class="col two">B</div>
<div class="col three">C</div>

使用calc()函数，我们可以轻松地将这些<div>设置为等宽的列。

.wrapper .col {
	width: calc(100% / 3);
	padding: 0 10px;
}

以下数学运算calc(100% / 3); 将父级宽度的100％除以三，这就是在浏览器中的结果。 三个<div>具有相等的宽度。

请点击下面的链接查看实际效果。

• 观看演示
• 下载源

此外，库尔特·缅因州还展示了calc()函数对于创建响应式布局确实非常有用。

注意事项

使用calc()函数时，需要注意一些事项。

• 首先，从左到右进行计算。
• 首先将计算除法或乘法，并且还将首先计算括号内的数学表达式。
• calc()当前在Opera中不受支持。
• 需要前缀-moz-和-webkit-才能覆盖早期的Firefox和Chrome版本。
• 我们可以对操作使用不同的单位，例如calc（50％– 10px）
• +和-符号必须用空格分隔，例如calc(100% -5px)将返回无效，因为它仅被解释为百分比，后跟负值。 但是， *和/符号不需要空格。

最终思想

在CSS3和CSS预处理程序之前，我们仅限于固定长度类型。 今天，借助calc()函数，我们能够以更智能的方式设置长度，以下是一些进一步深入研究该函数的参考。

• calc（）文档 – W3.org
• CSS3 Gems，calc（）函数 –站点点
• calc（）函数浏览器兼容性 – caniuse.com

您是否尝试过在最新的网站中使用此功能？

翻译自: https://www.hongkiat.com/blog/css3-calc-function/