【CSS】min 和 max 函数(设置最大最小值)

文章目录

  • min() 函数:允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值
css 复制代码
width: min(1vw, 4em, 80px);
  • max() 函数:让你可以从一个逗号分隔的表达式列表中选择最大(正方向)的值作为属性的值
css 复制代码
width: max(10vw, 4em, 80px);
  • 注意事项:
  1. max或min允许将max()和其他min()函数嵌套为表达式值。这些表达式是完整的数学表达式,因此可以直接使用加、减、乘、除运算,而无需使用calc()函数本身。
  2. 使用标准的运算符优先规则,表达式可以是加(+)、减(-)、乘(*)和除(/)运算符的组合值。
  3. 请确保+-操作数两边各加一个空格。表达式中的操作数可以是任意的<语法的价值。
  4. 你可以在表达式中为每个值使用不同的单位。还可以在需要时使用括号来确定计算顺序。
  5. 你经常需要合并min()max()的值,或者在clamp()calc()函数中使用min()
css 复制代码
small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}
相关推荐
whysqwhw5 分钟前
鸿蒙工程版本与设备版本不匹配
前端
gnip13 分钟前
http缓存
前端·javascript
我不只是切图仔1 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
该用户已不存在1 小时前
macOS是开发的终极进化版吗?
前端·后端
小豆包api1 小时前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
布列瑟农的星空2 小时前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天2 小时前
Vue3 实现 B站 视差 动画
前端
KenXu2 小时前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮2 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界2 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html