学透CSS- 数学函数(中) 阶梯值函数round/mode/rem 连载中
强调!!!
本文介绍的函数仍然属于实验中的属性,浏览器还不支持。但是相信不久就会支持。
如果暂时不想了解学习,建议收藏,等浏览器支持了再来看!!!
前言
css中有将近102个函数,但是我们所掌握的大概又有多少呢?今天我们先来介绍其中的数学函数,数学函数大概有:
- 基本算术:calc()
- 比较函数:min()、max()和clamp()
- 阶梯值函数:round()、mod()和rem()
- 三角函数:sin()、cos()、tan()、asin()、acos()、atan()和atan2()
- 指数函数:pow()、sqrt()、hypot()、log()、exp()
- 符号相关函数:abs() , sign()
这里是我个人称之为阶梯值函数,官方的叫法是: Stepped Value Functions
阶梯值函数-round()
语法
round(策略,A,B )
对于负值的处理:
round(nearest, A, -B) = round(nearest, A, B)
round(up, A, -B) = round(up, A, B)
round(down, A, -B) = round(down, A, B)
round(to-zero, A, -B) = round(to-zero, A, B)
策略
原来大概是这样的:找到两个倍数x和y,保证Bx(下B) 小于 A 并且By(上B)大于A,然后根据策略选择对应倍数的值。
为了方便的计算出值来,这里每一个总结出快速计算的公式。
nearest
默认的策略,类似于Math.round()
选择“下 B”和“上 B”中与 A 更接近的一个。如果是平局,请选择“上 B”。
round(nearest, A, B) = Math.round(A/Math.abs(B)) * Math.abs(B)
举例:
round(nearest, 4, 3) = 3
round(nearest, -4, 3) = -3
这里不用公式,来解释一下:
对于round(nearest, 4, 3)
,很简单,先找出倍数,一眼可以看出倍数是1和2,然后根据策略选择3*1离A最近,所以结果就是3.
对于round(nearest, -4, 3)
,很简单,先找出倍数,一眼可以看出倍数是-1和-2,然后根据策略选择3*-1离-4最近,所以结果就是-3。
下面的大家可以自己试试看,不行的话,就带入公式计算。
up
选择“上 B”
类似于Math.ceil()
round( up, A, B) = Math.ceil( A/Math.abs(B)) * Math.abs(B)
down
等价于Math.floor()
选择“下B
round(down, A, B) = Math.floor(A/Math.abs(B)) * Math.abs(B)
举例:
round(down, 4, 3) = 3
round(down, -4, 3) = (-6)
to-zero
Math.trunc()
选择“下 B”和“上 B”中更接近于 0 的那个。
round(to-zero, A, B) = Math.trunc(A/Math.abs(B)) * Math.abs(B)
阶梯值函数-mod()
并不是取余,是在 A 与 A 之上或之下的 B 的最近整数倍之间的差。并且这个差一定是要位于0至B之间。所以我们一定要清楚这里面的倍数,到底是多少。
这里要注意:差的算法
AB同正负:则A-b
AB异号 :则A+B
mod(A,B)
举例1-均为正值
mod(140px, 90px)返回50px,倍数是1。
为啥是1不是2呢,如果是2的话,相差40,确实比50小,但是你有没有发现,140-(90*2)返回的是-40,不符合值位于0-B之间。
举例2-均为负值
mod(-140deg, -90deg)返回值-50deg,倍数是1。
为啥是1不是2呢,如果是2的话,相差40,确实比50小,但是你有没有发现,-140-(-90*2)返回的是正40,不符合值在0-B之间。
因为将-90deg * 1添加到-140deg 会产生-50deg
举例3- A正B负值
mod(140deg, - 90deg)返回值-40deg,倍数是2。
这种情况就比较好求了,只要找x使得A+b*x最大负值就可以
举例4- A负B正值
mod(-140deg, 90deg)返回值40deg,倍数是2。
这种情况也是比较好求了,只要找x是的A+b*x是最小的正值就可以
阶梯值函数-rem()
rem函数和mod函数十分相似。
同样也是接收两个参数
rem(A,B)
这里要注意:差的算法也是一致的
AB同正负:则A-b
AB异号 :则A+B
当A和B同号的情况下,两者是一致的。
但是当AB异号的情况下,不一样,是因为rem取得差值要介于0和(-B),
举例1- A正B负值
mod(140deg, - 90deg)返回值50deg,倍数是1。
这里的B是负值,要取的值要介于0到90,所以倍数是1
举例2- A负B正值
mod(-140deg, 90deg)返回值-50deg,倍数是1。
这里的B是正值,要取得的值要介于0到-90,所以只有倍数1满足。
总结
本来是想这篇就结束数学函数的,但是这三个函数比较难理解,为了大家更好的吸收,就只写这三个函数了。下一篇一定写完数学函数系列。
- 点赞
- 收藏
- 关注作者
评论(0)