Question

我刚刚阅读了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;。

Answer 1

你是对的。 calc(40px)相当于40px。目前尚不清楚这个例子是否真的意味着准确地证明了这一点，如果是的话，为什么它感到需要这样做，因为它显然不是calc()的意图。

或许它可以隐藏那些不了解left的旧版浏览器的calc()声明，因为不了解它的浏览器会忽略width 1}}声明，但仍然应用left: 40px（无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一样在{/ em> calc()之后引入了对@supports的＆lt; time＆gt;值几年的支持。）

Answer 2

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

注意：calc()对calc()所描述的单个值的使用是一种黑客行为。它在某些情况下很有用，但它不是struct SYSTEMTIME { /** year */ WORD year; /** month */ WORD month; /** day of week */ WORD dayOfWeek; /** day */ WORD day; /** hour */ WORD hour; /** minute */ WORD minute; /** second */ WORD second; /** milliseconds */ WORD milliseconds; };的初衷。

在MDN示例中不必要地使用calc（）？

2 个答案: