CSS中 min() max() clamp()函数

引用文章

https://blog.csdn.net/ZYS10000/article/details/122755672https://blog.csdn.net/ZYS10000/article/details/122755672

我们希望元素的最大宽度为500px。

复制代码
.element {
  width: min(50%, 500px);
}

我们希望元素的最小宽度为500px。

复制代码
.element {
  width: max(50%, 500px);
}

我们希望元素的最小宽度为200px,首选值为50%,最大值为1000px。

clamp() 的语法非常简单:clamp(MIN, PREFERRED, MAX)

复制代码
.element {
/*clamp(最小值,首选值,最大值)*/
  width: clamp(200px, 50%, 1000px);
}
相关推荐
We་ct2 分钟前
LeetCode 162. 寻找峰值:二分高效求解
前端·算法·leetcode·typescript·二分·暴力
HWL56795 分钟前
uni-app的生命周期
前端·vue.js·uni-app
softbangong6 分钟前
829-批量提取各子文件夹下文件到一级目录
java·服务器·前端·自动化工具·批量文件处理·文件提取工具·文件夹整理
李剑一7 分钟前
别再瞎写 Cesium 可视化!热力图 + 四色图源码全公开,项目直接复用!
前端·vue.js·cesium
SuperEugene8 分钟前
Vue3 + Vue Router + Pinia 路由守卫规范:beforeEach 应做 / 不应做,避死循环、防重复请求|状态管理与路由规范篇
开发语言·前端·javascript·vue.js·前端框架
Greg_Zhong10 分钟前
Css知识之伪类和伪元素
前端·css
Mintopia11 分钟前
GPT-5.3-Codex 底层逻辑是什么,为什么编码强?
前端·人工智能·ai编程
Mintopia12 分钟前
Opus 模型凭什么收费贵,与其他模型对比理由是什么?
前端·人工智能
东东__net13 分钟前
js逆向与谷歌加密库
开发语言·前端·javascript
程序员小郭8322 分钟前
Spring Ai 05 ChatClient Advisor 实战(日志、提示词增强、内容安全)
java·开发语言·前端