新CSS Math方法中rem()和mod()的使用
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
CSS 添加了许多新的数学函数来补充旧有的函数（如 calc() 和最近的 clamp() ）。这些函数最终都表示一个数值，但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数的常见用例以及不太常见的用例。
rem() 函数的基础知识
余数的数学概念来自除法，表示一个数不能平均除以另一个数时的余数。例如，在 9 ÷ 4 中， 9 不是 4 的倍数，因此 4 不能平均分成 9 。你可以把两个 4 相加，得到 8 ，但是你仍然有一个 1 余数来得到 9 ，所以 1 就是我们的余数。
在 JavaScript 中，我们可以使用运算符来实现这一功能： % ：
console.log(9 % 4); // 1 console.log(5 % 4.1); // 0.9 console.log(1003 % 5); // 3
在 CSS 中，我们现在可以使用 rem() 函数来计算余数。它接受两个参数，就像 JavaScript 中使用余数操作符 % 的两个数字一样。在数学术语中，第一个数字是被除数，第二个是除数。
下面的 CSS 表示相当于前面的 JavaScript 示例：
line-height: rem(9, 4); /* 1 */ line-height: rem(5, 4.1); /* 0.9 */ line-height: rem(1003 % 5); /* 3 */
由于我们使用的是 CSS，因此还必须考虑单位。两个参数值的类型必须相同，例如长度或角度表示法。
rotate: rem(20deg, 5deg); /* 0deg */ rotate: rem(20deg, 7deg); /* 6deg */ rotate: rem(20deg, 3deg); /* 2deg */
如果单位类型相同，则可以混合使用。例如，我们可以混合使用 deg 和 turn 这两个单位，因为它们都表示角度。
rotate: rem(100deg, .25turn); /* 10deg (100 % 90) */ rotate: rem(200deg, .25turn); /* 20deg (200 % 90) */
值总是取第一个参数（被除数）的符号。因此，如果被除数是负数，结果也将是负数。第二个参数（除数）的符号对结果没有影响。
line-height: rem(9, 4); /* 1 */ line-height: rem(-9, 4); /* -1 */ line-height: rem(9, -4); /* 1 */ line-height: rem(-9, -4); /* -1 */
mod() 函数的基础知识
与余数概念密切相关的是模函数。当被除数和除数的符号相同时，两个函数的结果相同。
line-height: rem(9, 4); /* 1 */ line-height: mod(9, 4); /* 1 */ line-height: rem(-9, -4); /* -1 */ line-height: mod(-9, -4); /* -1 */
然而，rem() 函数取被除数的符号，而 mod() 函数则取除数的符号。
line-height: mod(9, 4); /* 1 */ line-height: mod(-9, 4); /* 1 */ line-height: mod(9, -4); /* -1 */ line-height: mod(-9, -4); /* -1 */
而最重要的是... 当你的符号混合时，你必须用不同的方式来思考 mod() 函数。让我们从一个例子开始：
line-height: rem(-9, 4); /* 1 */ line-height: mod(-9, 4); /* -3 */ line-height: rem(9, -4); /* -1 */ line-height: mod(9, -4); /* 3 */
当然，以下是这段话的中文翻译：
如果去掉符号，对于余数，我们通常会考虑除数的多少倍可以放入被除数中。在 rem(9, 4) 的情况下，两个 4 的倍数可以放入 9 中（因为 2 * 4 = 8），余数是 1（因为 9 - 8 = 1）。
对于mod() 函数，在一个符号为负数而另一个符号为正数的情况下，它会寻找比被除数更大的倍数。所以对于 mod(9, -4)，你要寻找刚刚超过被除数的倍数（4 * 3 = 12）。然后像往常一样，我们再查看差值，所以答案是 12 - 9 = 3。
到此这篇关于新CSS Math方法中rem()和mod()的使用的文章就介绍到这了,更多相关CSS rem mod内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
本文主要介绍了CSS中calc(100%-100px)不加空格不生效，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2023-05-05- CSS3新增的函数中有一个非常好用的函数，就是calc()函数，用过的都说好，这篇文章我们来唠一老calc函数，感兴趣的朋友一起看看吧2022-06-23
- 大家都知道Calc方法有个很大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度，本文通过一个例子给大家详细介绍，需要的朋友参考下吧2021-06-03
- 这篇文章主要介绍了CSS使用calc()获取当前可视屏幕高度的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2020-07-14
- 数学表达式calc()是CSS中的函数，主要用于数学运算。这篇文章给大家介绍了CSS中的数学表达式calc()的相关知识，感兴趣的朋友一起看看吧2020-01-19
- 这篇文章主要介绍了浅析CSS中calc()的使用的相关资料,需要的朋友可以参考下2016-05-10
css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，不过我们经常在文本溢出中使用这个参数2018-03-14
最新评论