一些 css 函数，例如 calc() 需要正确的间距才能工作。
例如以下 CSS 代码无法正常工作
.redrow {
background: red;
width: calc(100%-100px);
height: 100px;
margin: 0 auto;
}<html>
<body>
<div class="redrow"></div>
</body>
</html>之前的CSS代码的正确版本是:
.redrow {
background: red;
width: calc(100% - 100px);
height: 100px;
margin: 0 auto;
}
(注意calc函数中的空格)
还有哪些其他 css 函数需要正确的间距？
最佳答案
通读 documentation我发现注释指出您实际上不需要 calc 函数本身的间距，而是需要 - 和 + 符号的间距。这是解释。
Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.
所以我假设相同的规则适用于其他需要数学运算的 css 函数(尽管 calc 是这种类型中唯一的一个)。不幸的是我没有找到明确说明这一点的地方。
关于需要空间才能执行正确操作的 CSS 函数和命令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38193146/