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

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

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()

时情况并非如此

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