html - margin-left : max(40px); and how does this works? 是什么意思

Question

在video中SASS教程，Gary写了一行CSS为:

 margin-left: max(40px);

我想了解这行代码的含义以及它是如何工作的？

此外，它在他的系统中运行良好，但在我的浏览器中不起作用。可能是什么原因？

Link to Gary's source code.

Answer 1

max() 是 CSS 中的函数这是 CSS Values and Units Module Level 4 的一部分.

它允许您定义一个值列表，并使用其中的最大值:

margin-left: max(40px, 60px, 80px);

结果是:

margin-left: 80px;

也可以使用内部不带 calc 的表达式:

Note: Full math expressions are allowed in each of the arguments; there’s no need to nest a calc() inside! You can also provide more than two arguments, if you have multiple constraints to apply.

margin-left: max(10 * (1vw + 1vh) / 2, 12px);

不幸的是browser support对于 max() 以及 min() 或 clamp() 并不那么广泛，此代码片段仅适用于 Safari 和 Chrome目前:

div {
  width: 10px;
  height: 10px;
  background: red;
  margin-left: max(40px, 200px); 
}

<div></div>

当您在 SASS 上下文中遇到此问题时，还值得注意的是，有一个 max()function in SASS以及。而且它比原生的还要老:

CSS added support for min() and max() functions in Values and Units Level 4, from where they were quickly adopted by Safari to support the iPhoneX. But Sass supported its own min() and max() functions long before this, and it needed to be backwards-compatible with all those existing stylesheets. This led for the need for extra-special syntactic cleverness.