#yyds干货盘点#比较函数min/max/clamp

theme: channing-cyan 这是我参与8月更文挑战的第15天,活动详情查看:[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831") 内容太多,为了不让大家疲劳,分成几篇来写,势必学完所以CSS函数 创作不易,点了赞呗! 前言 css中有将近102个函数,但是我们所掌握的大概又有多少呢?今天我们先来介绍其中的数学函数,数学函数大概有: 基本算术:calc() 比较函数:min()、max()和clamp() 阶梯值函数:round()、mod()和rem() 三角函数:sin()、cos()、tan()、asin()、acos()、atan()和atan2() 指数函数:pow()、sqrt()、hypot()、log()、exp() 符号相关函数:abs() , sign() 除了这些函数,还有常量是需要记住的: e , pi,infinity,-infinity,NaN 常量 e是自然对数的底,约等于 2.7182818284590452354 pi是圆的周长与其直径的比值,大约等于 3.1415926535897932。 infinity 代表无穷大,值为 +∞ -infinity 代表无穷小,值为 −∞ NaN值为 NaN 基本算数-calc calc是英文单词calculate(计算)的缩写,它可以动态计算长度值。 他允许执行基本的算术运算,+),减(- ),乘(*),除(/),和括号。注意》》》 运算符和参数之间要有空格 他也支持文字长度,例如1px ,2em,同时还支持 计算结果是有效参数类型(例如)的 其他数学函数或其他表达式,例如attr(),其。 运算符的标准数学优先级规则适用:**calc(2 + 3 * 4)** 等于14,而不是20。 括号可用于操纵优先级:**calc((2 + 3) * 4)改为等于20。等价于calc(calc(2 + 3) * 4)** 举例 div { float: left; border: solid 1px; width: calc(100% / 3 - 2 * 1em - 2 * 1px); height:100px; } 我们算一下宽高是如何计算出来的。 102=100+上下border 429.32=1384/3-32-2+左右border 比较函数-min() min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中 , , , , ,, 或者 。 同时基本的算术运算,(+),减(- ),乘(*),除(/),和括号。 他也支持文字长度,例如1px ,2em,同时还支持 计算结果是有效参数类型(例如)的 其他数学函数或其他表达式,例如calc(),其。 min()是用来限制元素的最大值,类似于max-width/height 类似下面的语法都是支持的: width: min(5px * 10, 1em); width: min(calc(5px * 10), 1em); width: min(5px * 10, var(--width),20em,10px,......); 举例 div { float: left; border: solid 1px; width: min(100px,10em,10vw); height:100px; } 在移动设备Iphone下,最终元素的宽度只有39.53, 来计算一下: 首先min(100px,10em,10vw)换算成同一个单位的结果是 min(100px,160px,37.5px), =》最小值就是37.5px, =》元素宽度也就是37.5px加上两个border,也就是39.5, =》所以说width最大宽度就是37.5,不会是10px或者160px 在视窗宽度1384px的情况下:最终元素的宽度只有102px。 比较函数-max() min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中 , , , , ,, 或者 。 同时基本的算术运算,(+),减(- ),乘(*),除(/),和括号。 他也支持文字长度,例如1px ,2em,同时还支持 计算结果是有效参数类型(例如)的 其他数学函数或其他表达式,例如calc(),其。 min()是用来限制元素的最大值,类似于max-width/height 类似下面的语法都是支持的: width: min(5px * 10, 1em); width: min(calc(5px * 10), 1em); width: min(5px * 10, var(--width),20em,10px,......); 举例 div { float: left; border: solid 1px; width: min(100px,10em,10vw); height:100px; } 在视窗宽度1384px的情况下:最终元素的宽度只有162px。 来计算一下: 首先max(100px,10em,10vw)换算成同一个单位的结果是 max(100px,160px,138.4px), =》最大值就是160px, =》元素宽度也就是160px加上两个border,也就是163px, =》所以说width最小宽度就是160。 在移动设备Iphone下,最终元素的宽度也是162px, 比较函数-clamp() clamp数有三个计算-最小值,中间值,和最大值=clamp(min, val, max) 返回结果 有点像夹逼定理,仔细看注释理解 if(min<val&& val < max ){ return val } if(val max ){ return max } 举例 视窗宽度是1400px的。 div { float: left; border: solid 1px; width: clamp(100px,10em,10vw); height:100px; } 来计算一下: clamp(100px,10em,10vw) 等价于clamp(100px,160px,140px) 最终的返回结果是:140px 元素的宽度:140px+左右两个border=142

尚美源码教程库提供精美的网站源码教程,小程序、公众号、H5、APP、游戏、直播、支付、区块链、商城、影音、小说等源码信息大全。
用户必须遵守《计算机软件保护条例(2013修订)》第十七条:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。鉴于此条例,用户从本平台下载的全部源码(软件)教程仅限学习研究,未经版权归属者授权不得商用,若因商用引起的版权纠纷,一切责任均由使用者自行承担,本平台所属公司及其雇员不承担任何法律责任。
尚美源码教程库 » #yyds干货盘点#比较函数min/max/clamp
赞助VIP 享更多特权,立即登录下载海量资源
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡