如果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（）包含百分比時如何工作？

回答

相關問題