CSS calc（）函数似乎无法正常工作

Question

在下面的图片中，视口宽度为400px，进度条的宽度为300px。

如果我通过中间的硬编码值排列进度条，它可以很好地工作，请参阅下面的代码和图片：

@media (max-width:999px) {
    #containerProgressbarPageLoad{
        position:relative;
        margin-left: 50px;
        margin-right: 50px;
    }
}

但如果我使用calc()函数来完成这项工作，我将得到一个莫名其妙的结果，请参阅下面的代码和图片：

@media (max-width:999px) {
    #containerProgressbarPageLoad{
        position:relative;
        margin-left: calc(50vw-150px);
        margin-right: calc(50vw-150px);
    }
}

为什么calc不返回50px？ 50vw（= 200px）-150px应为50px。

Answer 1

+中的-和calc运算符必须始终用空格包围。

Answer 2

calc()声明中需要空格：

calc(50vw - 150px) 不 calc(50vw-150px)

<强> EG：

＆＃13;

＆＃13;

@media (max-width: 999px) {
  #containerProgressbarPageLoad {
    background:red;
    position: relative;
    margin-left: calc(50vw - 150px);
    margin-right: calc(50vw - 150px);
  }
}

＆＃13;

<div id="containerProgressbarPageLoad">containerProgressbarPageLoad</div>

＆＃13;

＆＃13;

＆＃13;