什么是calc（）的结果在CSS [英] What Is Result Of calc() In CSS

问题描述

我们现在开始在css中使用 calc（）来设置计算结果的宽度。
例如：

 < div id ='parent'> 
< div id ='calcWidth'>< / div> 
< / div> 
 
 
 #parent {
 width：100px; 
} 
 #calcWidth {
 width：calc（100％ -  3px）; 
 height：100px; 
 background：red; 
} 
  

我知道 calc $ c>工作，但我只是想知道在css中返回的是 calc（100％ - 3px）; 在上面给出的例子中。

我的困惑是什么？

• 在上述示例 width：calc（100％ - 3px）;




• c $ c> 100％ width实际上是 100px ，这将由css在运行时确定。




• 所以计算出的宽度为 100px-3px = 97px 97px，如果将它转换为％




$ b 有两种可能性：

• 97px 一个宽度。

返回


• 97％

我的问题是：

在这两种情况下，宽度都应设置为 97px ，但是
作为 width ：calc（100％-3px）; ， 97px OR 97％ p>

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

编辑：请阅读 p>

查看好友：以一个简单的例子：

 < div class = 'parent'> 
< div class ='child'> 
< / div> 
< / div> 
 
 .parent {
 width：200px; 
} 
 .child {
 width：20％
} 
  

$ b b

我知道孩子的宽度将变成160像素，当它被渲染。
好​​吧！但是这不是在css中设置什么？

所以类似地，使用calc， 返回％或像素

或者，为了解释我的问题，请阅读 BoltClocks answer ，计算值，（而不是使用的值，我知道是以像素为单位）

解决方案

spec 没有非常严格地定义<$ c $的计算值c> calc（）表达式，但是它确实说百分比从来不计算为计算值的一部分。

如果您看到像素长度而不是百分比，则该长度为因为像素值只能在计算任何百分比和布局元素之后确定。

请注意， getComputedStyle（）可能会返回与计算值的CSS定义不一致的结果。这是浏览器在90年代做自己的事情的许多不幸后果之一。

We have now started using calc() in css, for setting widths on a result of calculation. For example:

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


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

I know how calc() works, but I just want to know what is returned in css, in the place of calc(100% - 3px); in the example given above.

Whats my confusion?

• In the above example width:calc(100% - 3px);

• say the 100% width is actually 100px, which will be determined at runtime by css.

• So the calculated width will be 100px-3px=97px 97px and if you convert it to % 97% right?

But now, there are two possibilities

• 97px is returned, which is set as a width.

• 97% is returned, which is set as a width.

My Question is:

In both cases now the width shall be set to 97px, but what is returned as a result of width:calc(100% - 3px);, 97px OR 97% ?

you can also see this fiddle: http://jsfiddle.net/8yspnuuw/1/

EDIT: please read

See friends: Take a simple example:

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

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

I know the width of child will become 160 px when it is rendered. okay! but thats not what is set in css right? css sets it in %, it is just rendered in pixels.

So similarly, using calc, does it return % or pixel

Or to explain my question, read BoltClocks answer, what is the computed value, (and not the used value, i know that is in pixels)

解决方案

The spec does not define very strictly what the computed value of a calc() expression is, however it does say that percentages are never calculated as part of the computed value. How exactly this value is represented is left as an implementation detail.

If you see a pixel length instead of a percentage, then that length is the used value, not the computed value, because the pixel value can only be determined after calculating any percentages and laying out elements.

Note that getComputedStyle() may return results that are inconsistent with the CSS definition of "computed value". This is one of many unfortunate consequences of browsers doing their own thing back in the 90s.

这篇关于什么是calc（）的结果在CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！