Question

我想知道每当我使用em和百分比时代码中有多少像素。 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也是百分比得到百分比的基础吗？

Answer 1

设置填充时，如果使用百分比，则会通过乘以父容器的宽度来计算数量。但是如果你使用em单位设置填充，它会与容器的字体大小相乘。

您的.small容器的填充为.5em，计算为该容器当前字体大小的.5em。换句话说，它是.5em的20px（基本字体）* 200％（.small中的字体大小设置）。

但是.big的填充率为10％。其父容器为p.small，它默认为可用正文的100％。因此，.big的填充是可用体宽的10％。

如果您需要在应用CSS规则后找出填充的确切像素，则可以使用JavaScript。在处理相对单位时，设备分辨率，客户端字体大小设置和浏览器都可能影响像素大小。

如果未指定宽度，则填充继承长度

1 个答案: