css - CSS 中 calc() 的结果是什么

Question

我们现在已经开始在 css 中使用 calc() 来设置计算结果的宽度。例如:

<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);

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

• 所以计算出的宽度将为 100px-3px=97px 97px，如果将其转换为 % 97% 对吗？

但是现在，有两种可能

返回

• 97px，设置宽度

返回

• 97%，设置为宽度。

我的问题是:

In both cases now the width shall be set to 97px, but what is returned as a result of width:calc(100% - 3px);, 97px OR 97% ?

你也可以看到这个 fiddle : http://jsfiddle.net/8yspnuuw/1/

编辑:请阅读

看 friend :举个简单的例子:

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

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

I know the width of child will become 160 px when it is rendered. okay! but thats not what is set in css right? css sets it in %, it is just rendered in pixels.

同样，使用 calc，它返回 % 还是 pixel

或者要解释我的问题，请阅读 BoltClocks answer ，什么是计算值，(而不是使用值，我知道它以像素为单位)

Answer 1

spec没有非常严格地定义 calc() 表达式的计算值是什么，但是它确实表示永远不会将百分比计算为计算值的一部分。这个值是如何表示的，留作实现细节。

如果您看到的是像素长度而不是百分比，则该长度是使用值，而不是计算值，因为像素值只能在计算任何百分比和布局元素后确定.

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