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

Question

我最近意识到您可以结合使用 CSS 函数 clamp() 和 width 来设置“最大宽度”和“最小宽度”。我想知道在 min-width、width、max-width.

上使用 width + clamp() 时的根本区别是什么

换句话说，这是怎么...

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

...与此不同...

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

Answer 1

I am wondering what the fundamental difference is

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

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

时则不然

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

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

How does clamp() differ from setting width, max-width, & min-width?

css

clamp