css calc 乘法除法陷阱

CSS 有一个称为calc 的机制，它可以仅在 CSS 端计算要放入属性值的数值。

.apple{
    width: calc( 100vw - 50px );
}

这个calc 可以使用四种算术运算，但实际上乘法和除法有些事情你必须要小心。
它对乘法和除法单位的计算有限制。

如上所示，在乘法中，只允许一侧有一个单位，
只有除法的左边（分子）才允许有单位。

（准确地说，另一个必须是数字类型。）

.bad-apple{
    /* 　設定されない */
    width: calc( 10px * 10px );
    height: calc( 100px / 10px );
}
.orange{
    /* 　設定される */
    width: calc( 10px * 10 );
    height: calc( 100px / 10 );
}

好吧，您可以看到单位发生了变化，因为 $px*px$ 是 ${px}^2$ 而 $px/px$ 是无单位的。
如果是这样，如果 $px/px$ 只是一个没有单位的数字类型，那就太好了。

如果您查看 ，您可以看到特定的单位。还有，如何确定类型这里它写在

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308623820.html