新CSS Math方法中rem()和mod()的使用_F11 - 专业站长和开发者的学习网站

分享到

新CSS Math方法中rem()和mod()的使用

css 来源：互联网作者：佚名发布时间：2023-11-26 21:14:00 人浏览

摘要

rem() 函数的基础知识余数的数学概念来自除法，表示一个数不能平均除以另一个数时的余数。例如，在9 4中，9不是4的倍数，因此4不能平均分成9。你可以把两个4相加，得到8，但是你仍

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 这两个单位，因为它们都表示角度。

1 2	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。

您可能感兴趣的文章 :

原文链接 :

Tag : css(271)

css中flexbox和grid的区别小结

我们是不是被那些不会按预期排列的元素所影响？这篇文章我们将深入探讨css中flexbox和grid的布局。通过了解他们的主要差异，我们会发现这
使用CSS实现多行文本展开收起效果

在文章阅读、持续段落、多行文本等场景中经常会遇到有展开收起的需求操作，今天使用CSS实现一下具体的实现流程。二、实现思路实现多
纯CSS实现炫酷文本时钟特效的代码

如图所示这是一个纯本文时钟效果，和传统的时钟不一样，没有表盘，也没有完整到每一分钟的数字表示当前时刻。在这个时钟中，当前时
新CSS Math方法中rem()和mod()的使用

rem() 函数的基础知识余数的数学概念来自除法，表示一个数不能平均除以另一个数时的余数。例如，在9 4中，9不是4的倍数，因此4不能平均
CSS实现空心尖角的代码介绍

我记得之前刷面试题的时候，CSS面试题里面赫然有一题是如何用CSS实现三角形，我觉得这个问题确实很经典，我上的前端培训班当初就讲过
CSS取消移动端长按元素背景色的方法介绍

在开发微信小程序的时候，发现有的元素长按之后，出现了讨厌人的背景色，这就很奇怪，就想把它去掉，所以这里教一下方法：在所在元
CSS文字溢出:ellipsis在IE上不起效果的解决

单行文本的溢出显示省略号 1 2 3 4 5 p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 多行文本的溢出显示省略号方法一： 1 2 3 4 5 6 7
CSS的浮动及清除浮动的5种方法

个人简历的制作问题：在盒子模型中嵌套几个小盒子，在添加最后一个盒子的时候，更改颜色无变化。解决办法：前面的盒子中用到了
CSS中的display、visibility,和opacity的区别介绍

CSS 中的display、visibility和opacity是用来控制元素显示和隐藏的属性，它们有着不同的作用和效果。 display： display属性用于定义元素应该生成的
巧用CSS实现文字间距自适应宽度

项目需要开发一个仿医疗证书类的一个小卡片，用于模拟展示不同种类的证书信息，如下图片是官方的证书样例，证书的布局结构就是最上