Question

问题很简短：

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

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

Chrome表示该值无效。为什么？

（是否存在另一种以calc()为基础使用基于元素宽度的exponentiation的方法？）

Answer 1

如in the MDN docs所述，在calc()中使用乘法时，至少一个值必须为number：整数或浮点数，但不能为单位。< / p>

这意味着这些是有效值：

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

这些不是：

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

Answer 2

*

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

都是百分数而不是数字。您可以改为添加它们。

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