CSS中calc(100%-100px)不加空格不生效

下面是详细讲解CSS中calc(100%-100px)不加空格不生效的攻略。

问题概述

当我们在 CSS 中使用 calc() 函数计算元素的属性值时，需要注意的是减号两侧必须要有空格分隔符，如 calc(100% - 100px)，否则计算无法生效。比如，我们把减号和百分号紧挨着写成 calc(100%-100px) 是无法正确计算的。

解决方法

为了让 calc() 函数正常计算，需要在减号两侧加上空格分隔符。下面是两个示例说明。

示例一：使用 calc() 定义元素宽度

假设我们需要让一个元素的宽度为页面宽度的 50% 减去 20 像素，我们可以这样定义元素的样式：

width: calc(50% - 20px);

这样，元素的宽度就会减去 20 像素，而不是计算失败或者出现其他问题。

示例二：使用 calc() 定义元素位置

假设我们需要把一个元素定位到页面正中央，我们可以使用 calc() 函数来计算元素的位置。假设元素宽度为 200 像素，高度为 100 像素，CSS 样式如下：

position: absolute;
top: calc(50% - 50px);
left: calc(50% - 100px);
width: 200px;
height: 100px;

这样，元素就会被定位到页面正中央。

总结

在使用 calc() 函数时，需要注意减号两侧必须要有空格，否则计算无法生效。在这里，我们举了两个示例说明如何使用 calc() 函数来计算元素的属性值。