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

Question

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

我的 CSS 是：

body{
     font:10px;
}

#wrap {
   font:1.2em;
}

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

lipx 中的填充的值是多少？我猜它是 2.0*10 = 20px，但看起来它需要 1em = 12px，我的意思是它采用父尺寸。

我希望它采用 px 中的父字体大小的 1 倍（这意味着字体大小为bodynot wrap）。

score 1 · Accepted Answer

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

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

2em = 1.2em * x=>x = 1.67

所以填充应该是1.67em。

score 0 · Accepted Answer

的字体大小#wrap ul li为10px*1.2em*2em，因此padding-left:24px；

它总是采用父元素的字体大小（在你的情况下#wrap）

2 回答 2