本博客介紹瞭以下各屬性中的相對值以什麼為基礎：

1、transform:translateX、transform:translateY；

2、margin、padding；

3、width、height；

4、line-height；

5、top/bottom/left/right。

父元素寬高設置 width：300px；height：200px；

子元素寬高設置為 height：150px；width：100px；

父元素border厚度20px；

子元素的border厚度10px；

子元素和父元素設置為box-sizing：content-box；（默認就是content-box）

em可以查看如下鏈接說明：

1、transform:translateX、transform:translateY：

MDN關於transform的介紹：

博客有說過transform在inline元素中是無效的。

（1）用transform：translateX（50%）測試，可以看到最後計算絕對值是60；

這是由子元素自己的寬度加上兩邊的border厚度（100+10+10）×50%=60計算得到，所以transform：translateX的相對值（百分比）是以子元素自己的寬度為基礎計算的。

子元素自身設置為box-sizing：border-box；計算就不用考慮border厚度，因為寬度已經把border厚度包括瞭。

如果沒有給body設置寬度，就會按照body的自身寬度，也就是窗口寬度與border厚度來計算。（這裡隻示例瞭block元素,因為block是占用一行，所以會隨著窗口變寬而變化）

（2）子元素自己設置font-size：20px；父元素font-size：10px；

用transform：translateX（0.5em）測試，可以看到最後計算絕對值是10；所以transform：translateX的相對值（em）是以子元素自己的字體大小為基礎計算的。

2bcb17603ff5695596ec2599938a7c16

如果沒有設置font-size，就會按照瀏覽器默認的字體大小 font-size:16px為計算基礎；

68154235ff62d0c8c58951c933f2c7f6

（3）用transform：translateY（50%）測試，可以看到最後計算絕對值是85；

這是由子元素自己的高度height加上兩邊的border厚度（150+10+10）×50%=85計算得到，所以transform：translateY的相對值（百分比）是以子元素自己的高度height為基礎計算的。

子元素自身設置為box-sizing：border-box；計算就不用考慮border厚度，因為高度已經把border厚度包括瞭。

159ba3fa16abbc07920b5c9999ca862b

如果沒有給body設置高度，就會按照body的自身高度，這個高度由文檔流的高度決定（這個例子中是200+20+20），與body自己的border（10+10）厚度來計算，height等於240px。

（4）子元素自己設置font-size：20px；父元素font-size：10px；

用transform：translateY（0.5em）測試，可以看到最後計算絕對值是10；所以transform：translateY的相對值（em）是以子元素自己的字體大小為基礎計算的。

如果沒有設置font-size，就會按照瀏覽器默認的字體大小 font-size:16px為計算基礎；

2、margin、padding

（1）用margin：50%；padding：50%；測試，可以看到最後計算絕對值是150；說明margin/padding的相對值（百分比）都是按照父元素的寬度width作為基礎。

（2）子元素自己設置font-size：20px；父元素font-size：10px；

用margin：0.5em；padding：0.5em；測試，可以看到最後計算絕對值是10；所以margin：0.5em；padding：0.5em的相對值（em）是以子元素的自身字體大小為基礎計算的。

3、width、height；

（1）用 height：50%；width：50%；測試，可以看到最後計算絕對值是height：100px；width：150px；說明height/width的相對值（百分比）都是按照父元素的高度和寬度height/width作為基礎。

（2）子元素自己設置font-size：20px；父元素font-size：10px；

用height：0.5em；width：0.5em；測試，可以看到最後計算絕對值是10；所以height：0.5em；width：0.5em；的相對值（em）是以子元素的自身字體大小為基礎計算的。

4、line-height

（1）子元素自己設置font-size：20px；父元素font-size：10px；

用line-height：50%；測試，可以看到最後計算絕對值是10；說明line-height：50%的相對值（百分比）都是按照子元素自身的字體大小作為基礎。

（2）子元素自己設置font-size：20px；父元素font-size：10px；

用line-height：0.5em；測試，可以看到最後計算絕對值是10；說明line-height：0.5em的相對值（em）都是按照子元素自身的字體大小作為基礎。

5、top/bottom/left/right

（1）當使用position：relative前提使用top/bottom/left/right。

（1-1）用top/bottom/left/right：50%測試，可以看到最後計算絕對值是top/bottom：100px；left/right：150px；所以top/bottom和left/right的相對值（百分比）是以父元素的高height和寬width為基礎計算的。

（1-2）子元素自己設置font-size：20px；父元素font-size：10px；

用top/bottom/left/right：0.5em測試，可以看到最後計算絕對值是top/bottom/left/right：10px；所以top/bottom和left/right的相對值（em）是以子元素自身的字體大小為基礎計算的。

（2）當使用position：absolute前提使用top/bottom/left/right。

（2-1） 在body上增加width：500px；height：400px；把它的非static父級元素定位在body上。

用top/bottom/left/right：50%測試，可以看到最後計算絕對值是top/bottom：200px；left/right：250px；所以top/bottom和left/right的相對值（百分比）是以非static父級元素定位的高height和寬width為基礎計算的。

（2-2）在body上增加width：500px；height：400px；fonti-size：30px；把它的非static父級元素定位在body上。

用top/bottom/left/right：0.5em測試，可以看到最後計算絕對值是top/bottom/left/right：10px；所以top/bottom和left/right的相對值（em）子元素自身的字體大小為基礎計算的。

總結：

相對值（百分比和em）是以什麼為基礎計算。

本文為本人的原創文章，著作權歸本人所有，轉載務必註明來源