12

我们现在已经开始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);，97px或者97%？

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

编辑：请阅读

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

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

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

我知道孩子的宽度在渲染时会变成 160 px。好的！但这不是css中设置的内容吗？css 将其设置为 %，它只是以像素为单位呈现。

所以类似地，使用 calc，它是返回%还是pixel

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

4

5 回答 5

9

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

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

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

于 2015-02-25T10:10:46.643 回答
5

渲染的宽度以像素为单位。从你的例子

于 2015-02-25T09:58:59.660 回答
0

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

演示

 document.getElementById('calcWidth').offsetWidth;

像素jsdemo中的图像样式

于 2015-02-25T10:01:34.960 回答
0

calc() 没有计算值；它发生在渲染时——这就是你可以混合单位的原因。

于 2021-10-15T01:44:58.047 回答
0

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

这已经回答了你的问题。%-value 被转换成px你最终得到的end 97px。您可以通过截屏或截屏来确认这一点window.getComputedStyle()并进行测量。

于 2018-07-21T14:27:52.487 回答