clamp() 与设置宽度、最大宽度和最小宽度有何不同？

【问题标题】：How does clamp() differ from setting width, max-width, & min-width?clamp() 与设置宽度、最大宽度和最小宽度有何不同？
【发布时间】：2021-11-30 04:30:41
【问题描述】：

我最近意识到你可以结合使用 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);
}

【问题讨论】：

标签： css clamp

【解决方案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() 时则不是这样

在大多数情况下，您可能不会注意到任何差异，但请记住它们确实不同。

【讨论】：