如果calc（）包含百分比时如何工作？

我最近在设计网站布局时遇到了一些意外的行为。我很惊讶地发现，calc()的行为似乎完全改变，取决于在论证中是否有基于百分比的单位。如果calc（）包含百分比时如何工作？

这是一个最小的复制。

.container { 
 
    font-size: 30px; 
 
    display: inline-block; 
 
    border: solid purple .1em; 
 
} 
 

 
.inner { 
 
    border: solid orange .1em; 
 
} 
 

 
.inner.em { width: 3em; } 
 
.inner.calc { width: calc(3em + 0%); }

<div class="container"> 
 
    <div class="inner em">abc</div> 
 
</div> 
 

 
<hr> 
 

 
<div class="container"> 
 
    <div class="inner calc">abc</div> 
 
</div>

第二个是令我感到诧异，因为我预料calc(3em + 0%)可以等同于3em。但是，我测试过的每个浏览器都展示了这种行为。这种行为发生在任何百分比。 0%并不特殊。这是css规范的一部分吗？

来源

2014-10-09 recursive

我会用0％来说明我的观点，尽可能少的代码，尽管它发生在任何百分比值。 – recursive 2014-10-09 17:20:32

是的，我更新了我的问题来澄清。 – recursive 2014-10-09 17:22:04

酷酷的人...检查MDN，但没有到目前为止。 – 2014-10-09 17:23:12

的specs for calc明确地说，这是当时没有彻底解决：

其中的百分比为不计算值解决，他们不解决了“钙（）”的表达，例如'calc（100％-100％+ 1em）' 解析为'calc（0％+ 1em）'，而不是'calc（1em）'。如果有一个特殊的规则用于计算某个值的百分比（例如“高度” 属性），则只要'calc（）'表达式包含百分比，它们就会应用。

我会暂时推测10.2：

如果包含块的宽度取决于该元素的宽度，然后将所得的布局在CSS 2.1未定义。

这里适用，因为有一个百分比涉及，所以就像内部块的width:150%一样，外部块使用缩小拟合。

来源

2014-10-09 17:27:09

这是相关的，但它似乎并没有完全回答这个问题，因为这部分规范并没有说明'calc（0％+ 1em）'是如何作为一个物理维度最终计算出来的。 – recursive 2014-10-09 17:31:10

@recursive：是的，我试图把我的头围绕在10.3现在 – 2014-10-09 17:35:46

编辑的答案重新10.2似乎确切地说是关键。 – 2014-10-09 18:05:07

如果calc（）包含百分比时如何工作？

回答

相关问题