我最近意识到,您可以使用 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);
}
我想知道根本的区别是什么
它们完全不同,因此假设它们相同是错误的。我可以给你很多例子,它们的行为不同,但这里只有一个足以证明它们不一样:
.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()
时情况并非如此
在大多数情况下,您可能不会注意到任何差异,但请记住它们确实不同。