标签: css-calc

<div id="outerDiv">
    <div id="innerDiv"></div>
    <div id="remainderDiv"></div>
</div>

#outerDiv, #innerDiv, #remainderDiv{
    height: 100px;
}
#outerDiv{
    width: 55.5px;
    z-index: 1;
    background-color: red;
}
#innerDiv{
    width: calc(100% - 10px);
    z-index: 100;
    background-color: blue;
    float: left;
}
#remainderDiv{
    width: 10px;
    z-index: 100;
    background-color: green;
    float: left;
}

http://jsfiddle.net/yz8cwj3a/

结果:http://i.imgur.com/DYor2yb.png

这个小提琴显示了Chrome 37的一个问题.对具有小数像素的元素使用calc(100% - 10px)函数,它总是向下舍入.这会导致奇怪的事情.

在该示例中,外部div的宽度为50.5px.两个内部div具有calc(100% - 10px)和10px作为宽度.虽然这应该是50.5,但它仍然显示红色背景.

问题似乎是在Chome 37引入的.有没有人知道这个问题是否已经被报道和/或是否会被解决？

编辑:我从评论中了解到该问题已经存在了很长时间.有没有(跨浏览器)整洁的方法来解决这个问题？

I was developing a grid system using flexbox's justify-content: space-between; and I noticed that on certain screen sizes (about every other pixel) a 1 pixel gap appears at the end of certain columns.

If you start to resize your browser with the example below, you can see the 1 pixel space appearing and disappearing.

Example

* {
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  border: 2px solid #888;
  justify-content: …

我想通过使用css3 calc()来使用margin-right来自动+一些像素,但似乎声明是错误的.

selector{margin: calc(auto + 5px);

那么,如何使用它可以获取自动边距和加固定像素边距？

像这样的东西!

我是在 calc() 中使用 CSS 变量的新手，所以如果这很明显，请原谅我，但我正在尝试执行以下计算，并且终生无法弄清楚为什么它不起作用：

$h2-font-size: 21px;

--padding-top: calc(#{$h2-font-size}/3);
--padding-bottom: calc(#{$h2-font-size}/var(--padding-top));

padding-top: var(--padding-top);
padding-bottom: var(--padding-bottom);

第一部分计算 OK（即--padding-top: calc(#{$h2-font-size}/3);）正确计算7并填充该 OKpadding-top:值。

但是，该padding-bottom:值计算为0。

知道我哪里出错了吗？

最初我想知道是否是因为我使用了一个sass变量，但如果这是我预期--padding-top:失败的问题......但事实并非如此。

我注意到，如果我不向 font-size 添加 px 值，并将 font-size 放在 CSS 变量之后，那么我确实会得到一个返回值（尽管是我需要的错误数字）：

--padding-bottom: calc(var(--padding-top)/21); = 0.3333333

但是，如果我尝试交换顺序以进行正确的计算，我会得到0： --padding-bottom: calc(21/var(--padding-top));

我知道我还有很多东西要学，但我希望有人可以帮助我朝着正确的方向前进！

谢谢

我们现在开始calc()在css中使用,用于设置计算结果的宽度.例如:

<div id='parent'>
<div id='calcWidth'></div>
</div>


   #parent{
           width:100px;
           }
   #calcWidth{
            width:calc(100% - 3px);
            height:100px;
            background:red;
           }

我知道它是如何calc()工作的,但我只是想知道在css中返回什么,代替calc(100% - 3px);上面给出的例子.

我的困惑是什么？

• 在上面的例子中 width:calc(100% - 3px);

• 说100%宽度实际上100px是在运行时由css确定的.

• 所以计算出的宽度为100px-3px=97px97px,如果将其转换为% 97%右边？

但现在,有两种可能性

• 97px 返回,设置为宽度.

• 97% 返回,设置为宽度.

我的问题是:

在这两种情况下,现在的宽度应设置为97px,但什么是返回的结果width:calc(100% - 3px);,97pxOR 97%？

你也可以看到这个小提琴:http: //jsfiddle.net/8yspnuuw/1/

编辑:请阅读

见朋友:举一个简单的例子:

 <div class='parent'>
    <div class='child'>
    </div>
    </div>

.parent{
width:200px;
}
 .child{
  width:20%
  }

我知道渲染时子的宽度将变为160像素.好的!但那不是css中设置的那个吗？css将其设置为%,它只是以像素呈现.

所以类似地,使用calc,它会返回% …

我正在测试一个 CSS 框架，用于通过微类指定数字。例如，类似的内容<div class="fifty percent wide">可能会翻译成width: 50%. 该实现使用 CSS 变量（自定义属性）。

考虑以下 CSS：

.fifty   { --number: 50; }
.percent { --percent: calc(1% * var(--number)); }
.wide    { width: var(--percent); }

一切都很好，而且效果很好。问题是我想编写一个测试套件，它将验证 的自定义属性的fifty percent值。不幸的是，如果我用来检查 的值，我会看到整个（未解析、未计算的）“calc”字符串。如果我检查 的值，我会得到已经解析的值，例如“512px”。--percent50%getComputedStyle--percentwidth

是否有某种方法可以以编程方式获取和验证自定义 CSS 属性的已解析、计算值？或者强制计算“calc”表达式的 API？

我正在尝试创建一个宽度和高度为视图宽度 37% 的 div。

我希望 div 位于中间居中，因此我尝试采用视图宽度的 50% 并减去 37% 的值。

然后我希望 div 位于父 div 之外 50%。它基本上是一张带有个人资料图片的封面照片。底部位置需要为负数，以便将业务封面徽标强制放在业务视图包装器之外，而我能想到的唯一方法就是乘以负数。

<div class="business-view-cover">
    <div class="business-cover-logo"></div>
</div>

.business-view-cover {
    position: relative;
    height: calc(100vw * 0.5625);
    background-size: cover;
    background-position: center center;
    background-image: url('../images/business-cover-1.png');

    .business-cover-logo {
        position: absolute;
        --width-profile: calc(100vw * 0.37);
        --half-width: calc(var(--width-profile) / 2);
        --profile-bottom: calc(-1 * var(--half-width));
        bottom: calc(var(--profile-bottom) * -1);
        left: calc(50vw - var(--width-profile));
        width: var(--width-profile);
        height: var(--width-profile);
        border: 4px solid $e1-background-grey;
        border-radius: 1.6rem;
        background-size: cover;
        background-position: center center;
        background-image: url('../images/logo-cover-napa.png');
    }
} …

受这个问题的启发,我发现了这个有趣的现象.

由于负宽度是非法的,因此应该被忽略,我希望样式属性像width:-200px;和width:calc(0% - 200px);没有效果.事实上,对于第一个它没有.但是,第二个不被忽略:使用宽度0代替.

看这个例子:

div {border:1px solid; background:lime;}

#badwidth {width:-200px;}

#badcalc {width:calc(0% - 200px);}

Div with bad width:
<div id="badwidth"> </div>

Div with bad calc:
<div id="badcalc"> </div>

如果忽略width属性,则div将是其全宽(如顶部宽度).但是,它会折叠为0(请参见左侧的黑线;这是边框).

作为参考,这里有一些其他的div,以证明1)它calc(0% - 200px)本身不是一个错误,2)它们工作正常,第一个片段是一个异常.

div {border:1px solid; background:lime;}

#calc {margin-right:calc(0% - 200px);}

Plain div:
<div> </div>

With calc(0% - 200px) in a place where it's OK:
<div id="calc"> </div>

那么,为什么正常宽度和计算宽度表现不同？
如果它只是一个浏览器,我称之为一个bug.但是他们都以同样的方式对待它!所以必须有一些我忽略的东西.什么？

嗨,那么让我先向您展示如何在SCSS中执行此操作:

$submenu-padding-left: 1.5em;

transform: translateX(calc(-#{$submenu-padding-left} + .5em));

哪个会编译为:

transform: translateX(calc(-1.5em - .5em))

基本上,SCSS允许我将减号-与变量连接起来,以便将其转换为负值.

使用CSS变量可以实现这一点吗？

我想要一个基本的 HSL 颜色值，我想将其实现为渐变，如下所示：

:root {
    --hue: 201;
    --saturation: 31;
    --lightness: 40; 
    --mainColor: hsl(var(--hue),var(--saturation),var(--lightness));

    --difference: 20; /* 0 + --difference < --lightness < 100 - --difference */

    --lightnessPlus: calc(var(--lightness) + var(--difference));
    --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));

    --lightnessMinus: calc(var(--lightness) - var(--difference));
    --colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}

[...]
.class {
    background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}

上面的代码产生了一个透明的对象，我无法理解为什么，请帮忙！