标签: css-calc

我有一个行高设置的元素calc():

line-height: calc(3rem / 2);

演示:http://codepen.io/Ghodmode/pen/vLxZZd

它在Chrome中运行良好,但Firefox的开发人员工具表示它是无效的属性值.

我敢肯定我错过了一些显而易见的事情.

仅供参考:

• https://developer.mozilla.org/en/docs/Web/CSS/calc
• http://caniuse.com/#search=calc

谢谢.

假设我有一个占据整个空间的块，里面有一个固定宽度的块，像这样居中：

<div>
  <div style="width: 800px; margin: 0 auto">...</div>
<div>

如果我要尽量减少页面上元素的嵌套，下面的解决方案会更慢吗？

<div style="padding: 0 calc((100% - 800px)/2)">
  ...
<div>

我试图做基准测试，但我从来没有做过，所以我可能把它搞砸了：http : //jsperf.com/css3-calc-test/14

它表明 calc 版本的速度要快得多。

我正在尝试计算适用于父母内部的孩子的正确比例，但是我不能calc()在transform: scaleCSS函数内部使用。我已经使用javascript完成了此功能，但我对纯CSS解决方案感兴趣，以避免尽可能多地使用脚本来膨胀页面。

示例： CSS

   .anyclass{
     height:250px; /*this value can change dinamically */
     transform:scale(calc(100% / 490 )); /*is using height value*/
   }

此定义返回一个无效的属性值。其他用途，例如笔译：

.anyclass{
transform:translate(calc(100% - 50px ));
}

没问题。无论如何，我可以仅使用CSS使用calc来计算div的正确比例吗？

编辑：为了更好地说明它，因为findind的计算结果是0到1之间的值，所以这不是问题。如果使用百分比，我只会得到无效的属性值。

测试1，我尝试使用CSS3变量，但在Scale函数中没有结果

--height: calc(100% + 0px);
/* height: calc(var(--height) / 490); Calculates the right value: 0.5 */
--soom: calc(var(--height) / 490);
/* height: var(--soom); has the right value: 0.5 */
transform: scale(var(--soom)); /*Does not operate in the value stored in --soom*/

它似乎接受chrome中的值，但不操作比例尺。

ZOOM CSS属性似乎只能在chrome中正常工作。这很好。

zoom: calc(100% / …

是否可以将 css calc 运算的结果转换为 rem 单位？

我正在尝试进行此操作：calc((100% - 2.3rem)/2)并且我需要结果以 rem 为单位。

我想结合 CSS 变量和 calc()，但就像之前在这个线程中提到的那样（没有精确的答案），如果你做以下事情似乎有问题：

--a: 1;
--b: 2; 
--result: calc(var(--a) + var(--b));

这个例子的输出当然应该是 3，但是如果你使用 var(--result) 它只有值 var(calc(1 + 2))。

注意：我不想使用预处理器（如 sess 或 lass），只想使用原生 CSS。

所以我的问题是：在 var(--result) 中使用结果之前，您能否以某种方式强制执行 calc() 函数？

提前致谢！

让我们假设有以下 CSS：

.box {
  width: var(--box-size);
  height: var(--box-size);
  border: 1px solid red;
}

.box--larger {
  --box-size: 66px;
}

.box--larger1 {
  --box-size: calc(var(--box-size) + var(--box--larger));
}

.box--larger2 {
  --box-size: calc(50px + var(--box--larger));
}

:root {
  --box-size: 50px; 
  --box--larger: 16px;
}

<div class="box">1</div>
<div class="box box--larger">2</div>
<div class="box box--larger1">3</div>
<div class="box box--larger2">4</div>

我想知道为什么框 1 和框 2 有效而框 3 不起作用。我希望框 3 看起来与框 2 相同，但事实并非如此。我在 Chrome 中测试了 box 3 的方法，我发现var(--box-size)它没有显示值但var(--box-larger)确实返回了正确的值（16px）。

有人可以解释为什么框 3 的方法不起作用。我的意思是对我来说它看起来像有效的 CSS。

这个加载器动画在 Chrome、Opera、Firefox 和 Safari 中也能正常工作。但不适用于 Microsoft Edge。是否可以使其在 Edge 中工作？

<div class="_preLoader" style="--n:5">
            <div class="_circle _c1" style="--i:0"></div>
            <div class="_circle _c2" style="--i:1"></div>
            <div class="_circle _c3" style="--i:2"></div>
            <div class="_circle _c4" style="--i:3"></div>
            <div class="_circle _c5" style="--i:4"></div>
        </div>

风格

._preloader {
        display: flex;
        align-content: space-around;
        justify-content: center;
    }

    ._circle,
    ._circle::after {
        background: rgb(255, 99, 71);
        display: inline-block;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        animation: a 1s calc(((var(--i) + var(--o, 0))/var(--n) - 1)*1s) infinite
    }


    ._circle::after {
        --o: 1;
        background: #3C4252;
        content: ''
    }



    @keyframes a …

在 css 中指定百分比值时calc，如何calc知道我指的width是 or height？

.container {
    width: calc(100% - 2vw); // 100% here is width or height ?
}

人们可能会假设它是宽度或高度，具体取决于您正在访问的属性（在本例中为宽度）。如果是这种情况，如果您想根据不同的属性进行一些计算，会发生什么情况？例如，根据高度的某些计算来设置宽度？比如说，设置容器宽度为高度的1.5倍？

我四处寻找答案，但找不到任何有用的信息。我正在尝试将topCSS 中元素的属性设置为max(0, 120vh - 271px). 我已经尝试了几种变体：

• top: max(0, 120vh - 271px);
• top: max(0, (120vh - 271px));
• top: max(0, calc(120vh - 271px));

我的语法有问题吗？我一直让 Chrome 告诉我这是一个无效的属性错误。

在实践中，我实际上使用 CSS 变量来表示数字。所以120vh实际上是var(--height)或类似的东西。当我使用 CSS 变量时，该行没有做任何事情。它不应用样式，我没有收到任何警告。我在这里做错了什么？

我正在使用最新版本的 Chrome（我相信是 83），所以应该支持它。

标题说明了一切。

我想知道，这是我在calc()算术中可以在 CSS 中使用的最大数字。
它与 JavaScript 中的最大数字相同吗？

当我尝试使用转换时，限制似乎是 1e39（在 Chrome 和 for 中transform: translateX()）

div span {
  display: block;
  width: 100px;
  height: 100px;
  background-color: gold;
}
div:nth-child(1) span {
  -webkit-transform: translatex(calc(1e38px * 1e-37));
          transform: translatex(calc(1e38px * 1e-37));
}
div:nth-child(2) span {
  -webkit-transform: translatex(calc(1e39px * 1e-37));
          transform: translatex(calc(1e39px * 1e-37));
}
div:nth-child(3) span {
  -webkit-transform: translatex(calc(1e40px * 1e-37));
          transform: translatex(calc(1e40px * 1e-37));
}

<div>
   <code>transform: translatex(calc(1e38px * 1e-37));</code>
  <span></span>
</div>

<div>
   <code>transform: translatex(calc(1e39px * 1e-37));</code>
  <span></span>
</div> …