为什么在Calc()方法中必须用或者包含空格？

在前端开发中，calc() 函数是一个 CSS 函数，用于执行基础的数学计算。关于在 calc() 中使用空格的问题，这主要是出于语法解析的考虑。

CSS 的解析器在处理 calc() 函数时，需要能够清晰地识别出数学运算符（如 +、-、*、/）与数值之间的边界。如果在运算符和数值之间没有空格，解析器可能会将它们误解为一个单独的标识符或值，从而导致解析错误或计算不正确。

例如，考虑以下两个例子：

1. width: calc(100%-20px);
2. width: calc(100% - 20px);

在第一个例子中，100%-20px 可能会让解析器感到困惑，因为它不清楚 % 是与 100 一起表示一个百分比值，还是与 - 一起表示一个减法运算符。这种模糊性可能导致解析错误。

而在第二个例子中，通过在 100% 和 - 之间以及 - 和 20px 之间添加空格，我们清晰地界定了每个组件的边界。这使得解析器能够正确地识别出 100% 是一个百分比值，- 是一个减法运算符，而 20px 是一个像素值。因此，这个表达式可以被正确地解析和计算。

总的来说，虽然在某些情况下 CSS 解析器可能足够智能，能够处理没有空格的 calc() 表达式，但为了确保兼容性和避免潜在的解析问题，最佳实践是在 calc() 函数中的运算符和数值之间添加空格。