当我使用em和percentage时，我想知道代码中有多少像素。EM使用默认的浏览器字体大小，可以重写，并且它继承父块。
但是，当我使用百分比时，我不能算出确切的像素是多少。
根据w3.org
百分比:指包含块宽度
http://www.w3.org/TR/CSS2/box.html padding-properties
如果我没有指定它的包含块的宽度，它指向哪里。检查这个。https://jsfiddle.net/jameslem/2fygk5bq/
<style>
html{
font-size: 20px;
}
.small{
font-size:200%;
padding: .5em;
}
.big{
font-size:.5em;
padding: 10%;
border: 1px solid gray;
}
</style>
<body>
<p class="small">
LOVE <!-- font-size in px is 40 and padding is 20px -->
<span class="big">LETTER</span> <!-- font size is 20px and I want to know how many pixel is 10% padding-->
</p>
</body>
我的屏幕分辨率重要吗?我的意思是，如果我的尺寸是1360 x 768，那么我的宽度1360px也是百分比的基数吗?
在设置padding时，如果使用百分比，它将通过与父容器的宽度相乘来计算数量。但是，如果你使用em单位设置padding，它会根据容器的字体大小进行相乘。
您的.small容器的内边距为0.5 em，计算为该容器当前字体大小集的0.5 em。换句话说，它是0.5 em的20px(基础字体)* 200% (.small中的字体大小设置)。
但.big的填充率为10%。它的父容器是p.small，默认为100%的可用主体。因此，.big的内边距为可用正文宽度的10%。
如果您需要在应用CSS规则后找出填充的确切像素，您可以使用JavaScript。在处理相对单位时，设备分辨率、客户端字体大小设置和浏览器都可能影响像素大小。