css - 有人可以帮助解释 css3 calc() 方法的实际工作原理吗？

Question

http://www.w3.org/TR/css3-values/#calc

我一直致力于将一些 css3 方法转换为 css2 的库。一个棘手的部分是数学。css3 的 calc() 方法的提议让我大吃一惊。

我可以从 em 或任何其他固定单位添加/减去/除/乘像素，但我不知道如何将 10px 添加到 60%。

假设您设置了变量:$width1 = 10px； $width2 = 50%;

width: <?php echo $width1 + $width2; ?>;

有什么方法可以执行这种数学运算，以便静态宽度值可以应用于旧版浏览器？也许使用 css 表达式作为后备？

Answer 1

根据我的最佳猜测，你不能。这就是 CSS3 添加该功能的原因，因为 CSS2 无法自行完成。有几个 CSS 框架添加了该功能。至于单位转换，您必须使用您的示例做出一些关于优先级的决定:

$width1 = 10px$width2 = 50%

假设(对于此示例)一个 500 像素的屏幕，如果百分比优先，您首先要有一个 250 像素的 block ，然后向其添加 10 像素，得到 260 像素。如果你走另一条路，它将是 250px。 (这是假设 auto 优先于所有，所以 auto + 10px，然后是它的父容器的 50%)。