爲什麼CSS轉換中的百分比值相對於元素本身？

衆所周知，CSS翻譯中的百分比值與翻譯後的元素本身的大小相關，而（AFAIK）則應用於任何其他與父代大小相關的屬性。這主要用於垂直居中元素，例如，在我們的瀏覽器中，flexbox或grid是我們的東西。爲什麼CSS轉換中的百分比值相對於元素本身？

.wrapper { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: lightgray; 
 
} 
 

 
#element { 
 
    width: 42px; 
 
    height: 42px; 
 
    background-color: red; 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="wrapper"> 
 
    <div id="element"></div> 
 
</div>

在這個例子中，我們看到如何應用於left和top性質50％是指.wrapper的寬度的50％（或高度，爲top），所以它的250像素和100像素，分別。但在translate -50％適用於#element本身，因此它是42px的50％。

我看到它的好處，但我不明白這種（明顯）不一致的原因。所以，

爲什麼在CSS翻譯的百分比值是相對於元素本身，而在任何其他屬性是相對於父母的大小？
此行爲是否還有其他屬性？

編輯：作爲SergeS的回答說，我在MDN看到，所有屬性都有定義他們對<percentage>值本身引用。

在transform，

百分比 - 指邊界框的大小。

在top，

百分比 - 指的是包含塊的高度。

在margin，

百分比 - 指的是包含塊的寬度。

我很好奇這些定義的原因。

來源

2017-10-17 Jordi Nebot

翻譯屬性工作的元素，因爲它不涉及在瀏覽器上重新繪製像素，它只是從一個地方移動到另一個地方。其他的屬性將包括我想的所有變換屬性。 –

謝謝@ShubhamAgrawal。你知道這個重畫像素理論的任何來源嗎？ –

您可以參考[https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count] –

- 翻譯=採取當前元素和由定義平移。因此它需要考慮當前元素
- left，top，... - 和其他位置屬性 - 它們定義元素如何在父元素中定位 - 因此，它們計算位置以抵消父元素（相對父元素，最近的相對/絕對/固定元素爲絕對）
- 填充，邊距，... - 和othet 盒模型性質 - 它們定義的元素是如何父元素內部尺寸 - 所以他們又都與父容器
沒有

來源

2017-10-17 09:11:02 SergeS

謝謝您的回答。 'translate'把元素本身作爲參考**按定義**似乎是解釋這種行爲的一個很好的理由。我想知道*爲什麼* ... –

在這兩種情況下，值與到元素本身。

在第一種情況下，當你說left:50%和top:50%它只是意味着保持在50％從頂部偏移和左通過測量從第一相對定位的父（默認體）的偏移量的元素。

在第二種情況下，當您說翻譯它意味着您正在通過具有給定值的翻譯方法來轉換元素。

來源

2017-10-17 09:18:49

感謝您的回答。我必須說我真的不明白。我在'＃element'的多個屬性中使用了50％，例如在x軸上，'left' 50％的值爲250px，但translate中的x座標值爲21px，因此顯然引用不一樣。另外，我不明白第二種情況如何影響元素的大小...... –

爲什麼CSS轉換中的百分比值相對於元素本身？

回答

相關問題