CSS 中 calc() 的结果是什么

我们现在已经开始使用calc()在CSS中，用于设置计算结果的宽度。 例如：

<div id='parent'>
<div id='calcWidth'></div>
</div>


   #parent{
           width:100px;
           }
   #calcWidth{
            width:calc(100% - 3px);
            height:100px;
            background:red;
           }

我知道该怎样calc()有效，但我只想知道 css 中返回的内容是什么calc(100% - 3px);在上面给出的例子中。

我的困惑是什么？

• 在上面的例子中width:calc(100% - 3px);

• say the 100%宽度实际上是100px，这将在运行时由 css 确定。

• 所以计算出的宽度将是100px-3px=97px97px 如果你把它转换成% 97% right?

但现在有两种可能

• 97px返回，设置为宽度。

• 97%返回，设置为宽度。

我的问题是：

在这两种情况下，现在宽度应设置为97px，但是什么是 返回的结果是width:calc(100% - 3px);, 97px OR 97% ?

你还可以看到这个小提琴：http://jsfiddle.net/8yspnuuw/1/ http://jsfiddle.net/8yspnuuw/1/

编辑：请阅读

见朋友：举个简单的例子：

 <div class='parent'>
    <div class='child'>
    </div>
    </div>

.parent{
width:200px;
}
 .child{
  width:20%
  }

我知道 child 的宽度在渲染时会变成 160 px。 好的！但这不是 css 中设置的，对吗？ css设置为%，就是 只是以像素渲染。

类似地，使用 calc，它返回吗% or pixel

或者为了解释我的问题，请阅读BoltClocks 答案 https://stackoverflow.com/a/28716226/3556874， 是什么计算值，（不是使用值，我知道是以像素为单位的）

The spec http://www.w3.org/TR/css-values-3/#calc-computed-value没有非常严格地定义 a 的计算值calc()表达式是，但它确实表示百分比永远不会作为计算值的一部分进行计算。这个值到底是多少代表留下作为实现细节。

如果您看到像素长度而不是百分比，则该长度是使用的值，而不是计算值，因为像素值只能确定after计算任何百分比并布置元素。

注意getComputedStyle()可能会返回与“计算值”的 CSS 定义不一致的结果。这是 90 年代浏览器各行其是所带来的众多不幸后果之一。