Calc 函数不适用于求幂 [重复]答案

【问题标题】：Calc function doesn't work for exponentiation [duplicate]Calc 函数不适用于求幂 [重复]
【发布时间】：2019-12-18 10:57:09
【问题描述】：

问题很短：

由于某种原因，calc() 函数在我的情况下不起作用。

<style>
body {
    padding-left: calc(1% * 1%);
}
</style>

Chrome 说它不是有效值。为什么？

（有没有其他方法可以使用exponentiation，它基于元素宽度，与calc()？）

【问题讨论】：

标签： css

【解决方案1】：

*

在乘法中。至少有一个参数必须是数字

两者都是百分比而不是数字。您可以添加它们。

.box {
    padding-left: calc(15% + 10%);
}

【讨论】：

【解决方案2】：

如in the MDN docs 所述，在calc() 中使用乘法时，至少其中一个值必须是number：整数或浮点数，但无单位。

这意味着这些是有效值：

calc(1% * 2);
calc(3 * 10px);

这些都不是：

calc(1% * 1%);
calc(10px * 10px);

【讨论】：