css计算属性

/* 示例代码：使用 CSS 计算属性 */

/* 1. 基本的 calc() 函数 */
.container {
  width: calc(100% - 20px); /* 容器宽度为父元素的 100% 减去 20px 的边距 */
}

/* 2. 使用 calc() 进行复杂的计算 */
.item {
  margin-top: calc(50% / 3 + 10px); /* 顶部外边距为父元素高度的 50% 除以 3 再加上 10px */
}

/* 3. 结合其他 CSS 属性使用 calc() */
.box {
  padding: calc(1em + 10px); /* 内边距为 1em 加上 10px */
  font-size: calc(14px + 0.5vw); /* 字体大小为 14px 加上视窗宽度的 0.5% */
}

/* 4. 使用 min() 和 max() 函数 */
.responsive-box {
  width: min(500px, 80%); /* 宽度为 500px 和 80% 中较小的一个 */
  height: max(300px, 60vh); /* 高度为 300px 和视窗高度的 60% 中较大的一个 */
}

/* 5. 使用 clamp() 函数 */
.text {
  font-size: clamp(16px, 2vw + 10px, 24px); /* 字体大小在 16px 到 24px 之间，根据视窗宽度调整 */
}

解释说明：

• calc() 函数用于执行数学计算，支持加法、减法、乘法和除法。
• min() 函数返回多个值中的最小值。
• max() 函数返回多个值中的最大值。
• clamp() 函数允许你设置一个范围内的最小值、首选值和最大值，根据条件自动调整。