CSS中calc()的结果是啥

Posted 2023-03-06

【中文标题】CSS中calc()的结果是啥

【英文标题】：What Is Result Of calc() In CSSCSS中calc()的结果是什么

【发布时间】：2015-04-27 06:15:55

【问题描述】：

我们现在已经开始在 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%
  

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

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

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

【问题讨论】：

您可以使用 FireBug 查看计算的样式，或者使用控制台自己运行 getComputedStyle：developer.mozilla.org/en-US/docs/Web/API/Window/… 并进行测试:)

有趣的问题+1

鉴于最终结果始终以像素为单位，为什么calc() 的返回值的具体格式很重要？我猜它总是以像素为单位，因为这是每个计算的长度值最终被分配/渲染的，但我不确定。

嘿，为什么是反对票

【参考方案1】：

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

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

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

【讨论】：

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

@Naeem Shaikh：像素值用于渲染（因此是“使用值”）。

【参考方案2】：

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

【讨论】：

我知道它是以像素为单位呈现的：您阅读了我的问题现在在这两种情况下，宽度都应设置为 97px，但由于 cals 返回的是我的问题

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

【参考方案3】：

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

Demo

 document.getElementById('calcWidth').offsetWidth;

【讨论】：

我真的不同意这是错误的猜测.. 尝试设置属性，宽度只能以 px 为单位，例如 box-shadow

我明白你在说什么.. 但我想我的问题有点难以理解.. 请阅读我编辑的问题

@NaeemShaikh calc() 使用 % 但是 chrome 中的计算样式显示渲染值以像素为单位..所以我想这就是 BoltClock 在他的回答中提到的答案..cheers

幸运请看我的回答，我想你能理解，我现在在想什么

【参考方案4】：

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

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

【参考方案5】：

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