W1d28資訊網(wǎng)——每日最新資訊28at.com

CSS 添加了許多新的數(shù)學函數(shù)來補充舊有的函數(shù)（如 calc() 和最近的 clamp() ）。這些函數(shù)最終都表示一個數(shù)值，但其工作原理的細微差別并不總是一開始就很清楚。本文介紹每個函數(shù)的常見用例以及不太常見的用例。W1d28資訊網(wǎng)——每日最新資訊28at.com

rem() 函數(shù)的基礎知識

余數(shù)的數(shù)學概念來自除法，表示一個數(shù)不能平均除以另一個數(shù)時的余數(shù)。例如，在 9 ÷ 4 中， 9 不是 4 的倍數(shù)，因此 4 不能平均分成 9 。你可以把兩個 4 相加，得到 8 ，但是你仍然有一個 1 余數(shù)來得到 9 ，所以 1 就是我們的余數(shù)。W1d28資訊網(wǎng)——每日最新資訊28at.com

在 JavaScript 中，我們可以使用運算符來實現(xiàn)這一功能： % ：W1d28資訊網(wǎng)——每日最新資訊28at.com

console.log(9 % 4); // 1console.log(5 % 4.1); // 0.9console.log(1003 % 5); // 3

在 CSS 中，我們現(xiàn)在可以使用 rem() 函數(shù)來計算余數(shù)。它接受兩個參數(shù)，就像 JavaScript 中使用余數(shù)操作符 % 的兩個數(shù)字一樣。在數(shù)學術語中，第一個數(shù)字是被除數(shù)，第二個是除數(shù)。W1d28資訊網(wǎng)——每日最新資訊28at.com

下面的 CSS 表示相當于前面的 JavaScript 示例：W1d28資訊網(wǎng)——每日最新資訊28at.com

line-height: rem(9, 4); /* 1 */line-height: rem(5, 4.1); /* 0.9 */line-height: rem(1003 % 5); /* 3 */

由于我們使用的是 CSS，因此還必須考慮單位。兩個參數(shù)值的類型必須相同，例如長度或角度表示法。W1d28資訊網(wǎng)——每日最新資訊28at.com

rotate: rem(20deg, 5deg); /* 0deg */rotate: rem(20deg, 7deg); /* 6deg */rotate: rem(20deg, 3deg); /* 2deg */

如果單位類型相同，則可以混合使用。例如，我們可以混合使用 deg 和 turn 這兩個單位，因為它們都表示角度。W1d28資訊網(wǎng)——每日最新資訊28at.com

rotate: rem(100deg, .25turn); /* 10deg (100 % 90) */rotate: rem(200deg, .25turn); /* 20deg (200 % 90) */

值總是取第一個參數(shù)（被除數(shù)）的符號。因此，如果被除數(shù)是負數(shù)，結(jié)果也將是負數(shù)。第二個參數(shù)（除數(shù)）的符號對結(jié)果沒有影響。W1d28資訊網(wǎng)——每日最新資訊28at.com

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() 函數(shù)的基礎知識

與余數(shù)概念密切相關的是模函數(shù)。當被除數(shù)和除數(shù)的符號相同時，兩個函數(shù)的結(jié)果相同。W1d28資訊網(wǎng)——每日最新資訊28at.com

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() 函數(shù)取被除數(shù)的符號，而 mod() 函數(shù)則取除數(shù)的符號。W1d28資訊網(wǎng)——每日最新資訊28at.com

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() 函數(shù)。讓我們從一個例子開始：W1d28資訊網(wǎng)——每日最新資訊28at.com

line-height: rem(-9, 4); /* 1 */line-height: mod(-9, 4); /* -3 */line-height: rem(9, -4); /* -1 */line-height: mod(9, -4); /* 3 */

當然，以下是這段話的中文翻譯：W1d28資訊網(wǎng)——每日最新資訊28at.com

如果去掉符號，對于余數(shù)，我們通常會考慮除數(shù)的多少倍可以放入被除數(shù)中。在 rem(9, 4) 的情況下，兩個 4 的倍數(shù)可以放入 9 中（因為 2 * 4 = 8），余數(shù)是 1（因為 9 - 8 = 1）。W1d28資訊網(wǎng)——每日最新資訊28at.com

對于mod() 函數(shù)，在一個符號為負數(shù)而另一個符號為正數(shù)的情況下，它會尋找比被除數(shù)更大的倍數(shù)。所以對于 mod(9, -4)，你要尋找剛剛超過被除數(shù)的倍數(shù)（4 * 3 = 12）。然后像往常一樣，我們再查看差值，所以答案是 12 - 9 = 3。W1d28資訊網(wǎng)——每日最新資訊28at.com

W1d28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-33351-0.html新 CSS Math方法：Rem() 和 Mod()

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Qt 全球峰會 2023 中國站：優(yōu)化整體產(chǎn)品開發(fā)流程，為企業(yè)提供更多選擇

下一篇： 打造定制線程池：Java多線程的藝術