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

Question

我最近意识到您可以结合使用CSS函数clamp()width来设置“最大宽度”和“最小宽度”。我想知道在, ,上使用width+时的根本区别是什么。clamp()min-widthwidthmax-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()

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