在MDN示例中不必要地使用calc（）？ [英] Unnecessary use of calc() in MDN example?

问题描述

我刚刚在Mozilla的开发人员网络中阅读了CSS函数 calc（）。

第一个示例在这篇文章中使用以下CSS代码：

  .banner {
 position：absolute;剩余
：calc（40px）; 
 width：calc（100％ -  80px）; 
 border：纯黑1px; 
 box-shadow：1px 2px; 
 background-color：yellow; 
 padding：6px; 
 text-align：center; 
 box-sizing：border-box; 
} 
  

此HTML标记：

 < div class =banner>这是一个横幅！< / div> 
  

对不起，如果这是一个过于微不足道的问题，但有没有理由使用 left：calc（40px）或者这只是一个错误？由于没有什么可以计算的，我只是把 left：40px; 。

解决方案你是对的。 calc（40px）相当于 40px 。目前还不清楚这个例子是否真的要证明这一点，如果是的话，为什么它觉得有必要这样做，因为很明显， calc（）的意图不是使用。

也许这是一种隐藏 left 声明的方法，它们不能理解 calc（），因为不理解它的浏览器会忽略宽度声明，但仍然应用 left：40px （sans calc（））声明，带有不利影响。但是，这仅仅是一个有教养的猜测。

（事实上，我最近创建了一个CSS hack，它使用了一个独立的 calc（ 0s）表达式到隐藏旧版本的规则Firefox ）。

I just read up on the CSS function calc() in Mozilla's Developer Network.

The first example in this article uses the following CSS code:

.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;
}

And this HTML markup:

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

Pardon me, if this is an overly trivial question, but is there any reason to use left: calc(40px) or is that simply a mistake? Since there is nothing to compute, I'd just put left: 40px;.

解决方案

You are correct. calc(40px) is equivalent to 40px. It's not clear if the example actually meant to demonstrate exactly that, and if so, why it felt the need to do so, as it's clearly not how calc() was intended to be used.

Perhaps it's a way to hide the left declaration from older browsers that don't understand calc(), since browsers that don't understand it would ignore the width declaration, but still apply a left: 40px (sans calc()) declaration, with adverse effects. But this is just an educated guess on my part.

(In fact, I recently created a CSS hack that makes use of a lone calc(0s) expression to hide rules from older versions of Firefox.)

这篇关于在MDN示例中不必要地使用calc（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！