在CSS中使用相对而不是固定大小

Question

我想使用相对大小而不是固定大小。我想用em。

我的CSS是：

body{
     font:10px;
}

#wrap {
   font:1.2em;
}

#wrap ul li {
   padding-left:2em;
}

px中li填充的值是多少？我猜它是2.0 * 10 = 20px，但它看起来像是1em = 12px，我的意思是它把它作为父级大小。

我希望它能在px中占用1x的父字体大小（这意味着body的字体大小不是wrap）。

感谢您的建议。

Answer 1

正如你所说的，ems总是相对于它们的父元素。此外，元素的非字体尺寸始终相对于其字体尺寸进行计算 - 即，如果您说font-size:1.2em;padding:2em - 该元素的填充将是字体大小的2倍，即其下一个定义的父元素大小的1.2倍。 / p>

解决方案是使用更多数学。如果你的包装元素是1.2em，并且你希望内部元素填充是基线大小的两倍，你应该使用t=i*x，其中t是目标大小，i是继承的大小，并且x是所需的大小。所以对于我们的情况，2em是目标大小; 1.2em是继承的大小：

2em = 1.2em * x =＆gt; x = 1.67

所以填充应该 1.67em 。

Answer 2

#wrap ul li的字体大小是10px * 1.2em * 2em，因此padding-left：24px;

它始终采用父元素的字体大小（在您的情况下为#wrap）