在 MDN 示例中不必要地使用 calc()？答案

【问题标题】：Unnecessary use of calc() in MDN example?在 MDN 示例中不必要地使用 calc()？
【发布时间】：2018-06-01 23:18:40
【问题描述】：

我刚刚在 Mozilla 的开发者网络中阅读了 CSS 函数 calc()。

this article 中的第一个示例使用以下 CSS 代码：

.banner {
  position: absolute;
  left: calc(40px);
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

还有这个 HTML 标记：

<div class="banner">This is a banner!</div>

对不起，如果这是一个过于琐碎的问题，但有什么理由使用left: calc(40px) 或者这只是一个错误？由于没有什么要计算的，我就输入left: 40px;。

【问题讨论】：

MDN 是一个 wiki - 也许你可以解决这个问题 :)
回顾历史，it originally had 非calc 也是基于后备属性的。看起来它是从那时开始的，所以固定的 40px 将与实际的 calc 属性匹配，即它基于百分比或基于 px 的计算，具体取决于浏览器支持的内容。
说实话，整个例子有点奇怪。我会使用 left: 40px; 和 right: 40px; 来获得相同的结果。
我只能想象这样做是为了表明 calc() 理论上可以这样使用，即使它在实践中几乎没有相关性。

标签： html css

【解决方案1】：

你是对的。 calc(40px) 等价于 40px。目前尚不清楚该示例是否真的要准确地证明这一点，如果是的话，为什么它觉得有必要这样做，因为这显然不是 calc() 的用途。

也许这是一种对不理解 calc() 的旧浏览器隐藏 left 声明的方法，因为不理解它的浏览器会忽略 width 声明，但仍会应用 left: 40px ( sans calc()) 声明，具有不利影响。但这只是我的一个有根据的猜测。这正是@supports 创建的那种情况；但是，由于calc() pre-dates @supports by several years，@supports不能在这里使用，所以唯一的其他选择是利用CSS的well-defined error-handling rules。

（事实上，我最近创建了一个 CSS hack，它使用了一个单独的 calc(0s) 表达式到 hide rules from older versions of Firefox。具有讽刺意味的是，该表达式确实存在于 @supports 功能查询中，因为 Firefox 引入了对 calc() 的支持值几年后 @supports.)

【讨论】：

查看 @JamesThorpe 链接的修订版中的 cmets，我猜您对不解释 calc 的不利影响是正确的

【解决方案2】：

你是对的。 calc() 旨在与表达式一起使用，40px 是一个值，而不是表达式。将calc() 与值一起使用是没有意义的并且浪费资源。我不知道为什么它在示例中，但很可能是一个错误。

注意：calc() 与 BoltClock's answer 所述的单个值一起使用是一种 hack。在某些情况下可能有用，但这不是calc()的初衷。

【讨论】：

嗯，我一直以为value was an expression也是？
阅读维基百科和微软文档，我得到了不同的印象。这让我好奇到实际上ask this as a question here on SO。
我认为您误解了文档。单独的单个值不是表达式，但有些表达式只有一个值。示例：在此表达式var x = 5; 中，值5 本身不是表达式，但x = 5 是。同样，如果我们以本题为例，40px 的值不是表达式，而calc(40px) 是。 left: 40px 也可以被认为是一个表达式，因为它就像是在说 left = 40px。