CSS的clamp()函数将值保持在由最小值和最大值定义的范围内。
它具有三个参数:最小值、首选值和最大允许值。
可能的值
clamp(min, val, max) 函数采用三个逗号分隔的表达式作为参数。
min - 最小值表示最小或最大负值，是允许范围的下限。如果首选值低于此最小值，则使用最小值。
val - 首选值是在最小值定义的范围内时使用的表达式和最大值。
max - 如果首选值超过此上限，则将最大值分配给该属性，即允许的最大（最正）表达式值。
clamp() 中的表达式可以包含数学函数、文字值或其他有效的参数类型。允许直接加、减、乘、除。
括号可用于指定计算顺序。
要记住的要点:
自动和固定布局表格中的列、列组、行、行组和单元格的表格尺寸（宽度和高度）百分比被解释为自动。
CSS 表达式中允许嵌套 max() 和 min() 函数，其中内部函数被视为括号。
完整的数学表达式，包括加法、减法、乘法和除法，无需嵌套 max() 和 min() 函数中的 calc() 函数即可使用。
表达式可以包含加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 运算符，遵循通常的优先级规则。
应在 + 和 - 操作数的两侧添加空格。操作数可以是任何语法 <length> 值并使用不同的单位。括号可用于控制计算顺序。
经常需要在clamp()函数中使用min()和max()函数。
返回值
clamp(MIN, VAL, MAX) 函数解析为 max(MIN, min(VAL, MAX))。
该函数返回类型为 <length>、<Frequency>、<angle>, <time>, <percent>, <integer>, ，具体取决于给定的参数。
语法
clamp( <calc-sum>#{3} ) 井号 (#) 标记乘数表示实体可以重复一次或多次（此处为 3 次），但每次出现都用逗号 (',') 分隔。
CSS Clip(): 基本示例
以下示例演示了如何使用 CSS Clip() 函数来设置响应式框宽度，确保它们在指定的最小值和最大值之间缩放，同时适应父容器的宽度。
调整浏览器窗口的大小，以查看如何借助钳制功能根据视口调整框的宽度。
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: clamp(200px, 40%, 300px);
height: 150px;
margin: 20px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
</div>
</body>
</html>