什么是calc（）的结果在CSS中

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%，将其设置为宽度。

我的问题是：

  

在这两种情况下，宽度都应设置为97px，但是是什么   由于width:calc(100% - 3px);，97px或97%？

而返回

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

编辑：请阅读

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

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

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

  

我知道渲染时子的宽度将变为160像素。   好的！但那不是css中设置的那个吗？ css将其设置为％，它是   只是以像素呈现。

所以类似地，使用calc， 会返回%或pixel

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

Answer 1

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

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

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

Answer 2

渲染的宽度以像素为单位。

Answer 3

无论calcWidth div的像素大小是多少，值3都会从中减小...例如，如果父级的宽度为200，则calcWidth div的宽度将为197px。所以它是px而不是％

Demo

 document.getElementById('calcWidth').offsetWidth;

Answer 4

CSS不支持动态值（例如width: 100%;之类的简单百分比值）。这意味着100%中的calc()最初一次转换为px，而不是连续转换。

那已经回答了您的问题。 %值将转换为px，最终得到97px。您可以使用window.getComputedStyle()或通过截屏并进行测量来确认这一点。