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()，但我只是想知道在上面给出的示例中，在calc(100％ - 3px)的位置返回了什么CSS属性。

我的困惑是什么？

• 在上面的示例中，width: calc(100％ - 3px)
• 假设100%的宽度实际上是100px，这将由CSS在运行时确定。
• 因此，计算出的宽度将是100px-3px = 97px，如果将其转换为%，则为97％，对吗？

但现在，有两种可能性

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

我的问题是：

在两种情况下，宽度将设置为97px，但width: calc(100％ - 3px)返回的结果是97px还是97％？

您也可以查看此fiddle：http://jsfiddle.net/8yspnuuw/1/

编辑：请阅读

看朋友们的：

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

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

我知道当子元素被渲染时其宽度将变为160像素。 好的！但这与CSS中设置的不同吧？CSS使用百分比进行设置，只是以像素呈现。

所以类似地，使用calc，它会返回百分比还是像素

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

- Naeem Shaikh

---

你可以使用FireBug来查看计算出的样式，或者在控制台中自己运行getComputedStyle：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle 然后进行测试 :) - Gerino

有趣的问题 +1 - Persijn

由于最终结果总是以像素为单位呈现，因此calc()的返回值特定格式有何意义？我猜测它始终会以像素为单位，因为长度的每个计算值最终都会被分配/呈现为像素，但我不确定。 - David Thomas

嘿，为什么会有踩票？ - Naeem Shaikh

Answer 1

规范 没有严格定义calc()表达式的计算值是什么，但它确实指出百分比永远不会作为计算值的一部分计算。这个值如何被表示留给了实现细节。

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

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

- BoltClock

---

那么这是否意味着像素是由calc设置的？ - Naeem Shaikh

@Naeem Shaikh：像素值用于渲染（因此称为“使用值”）。 - BoltClock

Answer 2

渲染宽度以像素为单位。

- johanthuresson

---

我知道它是以像素为单位呈现的：你读了我的问题“在这两种情况下，现在宽度都应设置为97像素”，但cals返回的结果是我的问题。 - Naeem Shaikh

它返回一个函数，该值被渲染成像素。这为什么很重要？ - johanthuresson

Answer 3

CSS不支持动态值（除了简单的百分比值，如width: 100%;）。这意味着calc()中的100%会在初始时被转换为px而不是连续的。

这已经回答了你的问题。百分比值会被转换为px，最终你会得到97px。你可以通过window.getComputedStyle()或者截图并测量来确认。

- Ini

Answer 4

无论 calcWidth div 的像素大小是多少，都会从中减去值 3。例如，如果父元素的宽度为 200，则 calcWidth div 的宽度将为 197 像素。因此，它是像素而不是百分比。

演示

 document.getElementById('calcWidth').offsetWidth;

- Lucky

---

我并不完全同意这个说法是错误的，我猜可能是因为设置属性时，宽度应该只能使用像素（px），例如盒子阴影（box-shadow）。 - Naeem Shaikh

我明白你的意思，但我的问题可能有点难以理解。请阅读我编辑过的问题。 - Naeem Shaikh

@NaeemShaikh，calc() 使用 %，但在 Chrome 的计算样式中显示渲染值为像素，所以我想这就是 BoltClock 在他的答案中提到的答案。干杯！ - Lucky

Lucke，请看一下我的回答，我想你现在可以理解我的想法。 - Naeem Shaikh

Answer 5

calc()没有计算值；它在渲染时发生--这就是为什么您可以混合使用单位。

- Fentablar