学透CSS- 数学函数(中) 阶梯值函数round/mode/rem 连载中

举报
搞前端的半夏 发表于 2021/10/24 20:45:45 2021/10/24
【摘要】 强调!!!本文介绍的函数仍然属于实验中的属性,浏览器还不支持。但是相信不久就会支持。如果暂时不想了解学习,建议收藏,等浏览器支持了再来看!!! 前言css中有将近102个函数,但是我们所掌握的大概又有多少呢?今天我们先来介绍其中的数学函数,数学函数大概有:基本算术:calc()比较函数:min()、max()和clamp()阶梯值函数:round()、mod()和rem()三角函数:sin...

强调!!!

本文介绍的函数仍然属于实验中的属性,浏览器还不支持。但是相信不久就会支持。

如果暂时不想了解学习,建议收藏,等浏览器支持了再来看!!!

前言

css中有将近102个函数,但是我们所掌握的大概又有多少呢?今天我们先来介绍其中的数学函数,数学函数大概有:

  1. 基本算术:calc()
  2. 比较函数:min()、max()和clamp()
  3. 阶梯值函数:round()、mod()和rem()
  4. 三角函数:sin()、cos()、tan()、asin()、acos()、atan()和atan2()
  5. 指数函数:pow()、sqrt()、hypot()、log()、exp()
  6. 符号相关函数:abs() , sign()

这里是我个人称之为阶梯值函数,官方的叫法是: Stepped Value Functions

image.png

阶梯值函数-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满足。

总结

本来是想这篇就结束数学函数的,但是这三个函数比较难理解,为了大家更好的吸收,就只写这三个函数了。下一篇一定写完数学函数系列。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。