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()时则不是这样

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