什么是calc()的结果在CSS中

Question

我们现在开始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);

• 说100%宽度实际上100px是在运行时由css确定的.

• 所以计算出的宽度为100px-3px=97px97px,如果将其转换为% 97%右边？

但现在,有两种可能性

• 97px 返回,设置为宽度.

• 97% 返回,设置为宽度.

我的问题是:

在这两种情况下,现在的宽度应设置为97px,但什么是返回的结果width:calc(100% - 3px);,97pxOR 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 1

该规范并没有定义非常严格的什么的计算值calc()表达,但它确实说,百分比是从来没有作为计算值的部分计算.如何表示此值将保留为实现细节.

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

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

Answer 2

渲染宽度以像素为单位.