此篇是參考 Amelia Wattenberger
熟悉百分比分別是根據何者計算，自己在練習時使用百分比時都是用一直微調的方式調到符合的樣子，沒注意是根據誰來計算值 XD

width 和 height

當子元素的寬和高的值是 50%，代表的是父元素的寬和高的值的 50%
，因此 .box 的寬和高是 250px，因此寬和高的值若是百分比表示，就是根據父元素來計算
範例

top 和 left

當子元素是根據 .box-large 絕對定位，並設定 top 和 left 都是 50%，代表以 .box 的左上角 ( top: 0; left: 0; ) 為定點，設定和父元素的最上方距離父元素的高的 50%，以及和父元素的最左方距離父元素寬的 50%，因此 top 和 left 用於定位的值是根據父元素的寬和高的值來計算，父元素的寬高為 500px，因此 top 和 left 是 250px
範例
可透過開發者模式看出

margin

當子元素的 margin-top 和 margin-left 設定 50%，可以發現 margin-top 和 margin-left 都是根據父元素的寬來計算，margin-top 和 margin-bottom 都不是以父元素的高計算的，因此 .box 的 margin-top 是 50px，margin-left 是 250px

範例

padding

padding 和 margin 相同，上下的 padding 若是以百分比表示，也是跟著父元素的寬度計算，需注意的是若設定 box-sizing: border-box; 自動計算元素空間，設定的 padding 不會增加元素的空間，會依照 .box 原本的寬高來計算出新的 content area，因此 .box 的上方 padding 為 50px ( 500 * 10% )，左邊 padding 為 100px ( 500 * 20% )，元素內容的寬變成 150px，高變成 200px

但若在設定 box-sizing: border-box; 的情況下，padding 值超過元素本來的寬高，還是會增加元素空間
範例

transform: translate

若是使用 translate 將子元素移動位置，translate的 X 軸和 Y 軸的百分比是用子元素本身的寬高來計算，因此子元素設定 transform: translate(10%, 20%); ，.box 會向下移動 25px ( 500 * 50% * 10% )，向右移動 30px ( 500 * 30% * 20% )
範例

參考資料：
Amelia Wattenberger