clamp()和设置width、max-width和min-width有何不同？

Question

我最近意识到你可以使用CSS函数clamp()与width结合使用，以设置“最大宽度”和“最小宽度”。 我想知道使用width+clamp()与min-width、width、max-width相比的基本区别是什么。

换句话说，这样做有何不同？……

.item {
   width: 100%;
   max-width: 200px;
   min-width: 100px;
}

…与此不同的是...

.item {
   width: clamp(100px, 100%, 200px);
}

- Pat Murray

Answer 1

我想知道它们的根本区别是什么。

它们完全不同，因此假设它们相同是错误的。我可以给你很多例子来说明它们的行为不同，但这里只有一个应该足以证明它们不同：

.item1 {
  width: 100%;
  max-width: 300px;
  min-width: 200px;
}

.item2 {
  width: clamp(200px, 100%, 300px);
}

.container {
  display: flex;
  height:80px;
  margin:10px;
  width:150px;
  border: 2px solid;
}

.container>* {
  background: red;
}

<div class="container">
  <div class="item1"></div>
</div>
<div class="container">
  <div class="item2"></div>
</div>

在下面的例子中，使用min-width会设置收缩效果的最小边界（产生溢出），而使用clamp()则不会出现这种情况。在大多数情况下，您可能不会注意到任何区别，但请记住它们确实是不同的。

- Temani Afif

---

也许我错了或者漏掉了什么，但是在.container上设置display:block（需要在项目上设置height:100%，否则您将无法看到它们），项目将正确溢出，包含效果来自flexbox，如果您通过devtools查看， clamp会正确设置所需的最小值。 所以我想重点不是clamp本身，而是应用的位置/方式，对吗？ - Gruber

@Gruber，无论是flexbox还是其他什么都不重要。我选择了我能想到的第一个例子来说明我们没有得到相同的最终结果，这意味着两者并不相同。如果两者是相同的（如OP所假设的那样），那么无论代码配置如何，它们应该始终产生相同的结果。两者在大多数情况下可以用来获得相同的结果，但我们不能说它们完全相同。 - Temani Afif