在css calc函数中使用模数

Question

有没有办法在css calc函数中使用或实现模运算符？
我知道有mod运算符和IE支持它,但其他浏览器呢？

例如

#element-id{
     width: calc( 100%  mod 5 );
}

Answer 1

不幸的是,最近的规格中没有提及mod运营商.

calc()函数允许使用加法(+),减法( - ),乘法(*)和除法(/)的数学表达式作为组件值.

您可能希望使用javascript来实现此类行为.

var el = document.getElementById('element-id');
el.style.width = (100 % 5) + '%';

Answer 2

只是...“不”。

MDN

该表达式可以是使用标准运算符优先级规则组合以下运算符的任何简单表达式：

+ 加成。

- 减法。

*乘法。参数中至少一个必须是<number>。

/师。右侧必须为<number>。

Answer 3

CSS 值和单位模块第 4 级 （W3C 工作草案，2022 年 4 月 27 日）具有mod()（维基百科上有关 CSS4 的一般信息）。

截至撰写本文时（2022 年 4 月），此功能还很新，尚未有浏览器支持它；事实上，它是如此新鲜，以至于连我可以使用都没有它的条目。将来，“我可以使用吗”可能会mod()在https://caniuse.com/mod上有一个专门的页面。

虽然目前不支持mod()，但可以使用其他 CSS 功能来实现模运算，如https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-中所示-今天：

@property --floor {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.a-mod-b-width {
  background-color: yellow;
  --floor: calc(var(--a)/var(--b) - 0.5);
  --mod: calc(var(--a) - var(--b)*var(--floor));
  width: calc(100px * var(--mod));
}

尽管浏览器支持有限，但该技术利用了calc()和：因此，该技术适用于 Chrome、Edge 和 Opera；但目前它在 Firefox 和 Safari 中不起作用。主要技巧是使用“syntax”定义CSS属性，该属性使用floor函数计算值。以这种方式提供的下限函数是在属性中使用函数计算的。@property@property --floor<integer>a mod b--moda - b * floor(a / b)

以下演示使用此技术来计算width其某些 s 的div：

• 在第 1 行到第 4 行中，右列divs 已硬编码width；这里没有模魔法。div它们的目的是作为与模计算宽度的 s进行比较的参考。请注意，第一个“绿色”div实际上是不可见的，因为它的width: 0px.
• 从第 5 行开始，右列（颜色为黄色）根据值 的div规则 计算其宽度。由于和相等，它们的s 的宽度为，因此实际上是不可见的。100px * (a mod 3)a=[0, 1, 2, 3, 4]0 mod 33 mod 30div0px

@property --floor {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.a-mod-b-width {
  background-color: yellow;
  --floor: calc(var(--a)/var(--b) - 0.5);
  --mod: calc(var(--a) - var(--b)*var(--floor));
  width: calc(100px * var(--mod));
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: lightgray;
  grid-gap: 10px;
}

.grid-container > *:nth-child(2n + 1) {
  background-color: silver;
  font-family: monospace;
}

.green {
  background-color: green;
  width: 0px;
}

.aqua {
  background-color: aqua;
  width: 100px;
}

.orange {
  background-color: orange;
  width: 200px;
}

.red {
  background-color: red;
  width: 300px;
}

@property --floor {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.a-mod-b-width {
  background-color: yellow;
  --floor: calc(var(--a)/var(--b) - 0.5);
  --mod: calc(var(--a) - var(--b)*var(--floor));
  width: calc(100px * var(--mod));
}

.a0 {
  --a: 0;
}

.a1 {
  --a: 1;
}

.a2 {
  --a: 2;
}

.a3 {
  --a: 3;
}

.a4 {
  --a: 4;
}

.a5 {
  --a: 5;
}


.b0 {
  --b: 0;
}

.b1 {
  --b: 1;
}

.b2 {
  --b: 2;
}

.b3 {
  --b: 3;
}

.b4 {
  --b: 4;
}

除了有限的浏览器支持之外，使用这种计算模技术还有另一个可能的警告：“当需要整数时，Chrome 浏览器当前不会接受 calc() 返回的某些值。这包括任何除法，即使它会导致一个整数。即 z-index: calc(4 / 2); 将不被接受。 ”