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

Question

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

我的 CSS 是:

body{
     font:10px;
}

#wrap {
   font:1.2em;
}

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

li 的 padding 值是多少？我猜它是 2.0*10 = 20px，但它看起来像 1em = 12px，我的意思是它采用父尺寸。

我希望它以 px 为单位采用父字体大小的 1 倍(这意味着 body 不是 wrap 的字体大小)。

Answer 1

正如您所说，em 总是相对于它们的父元素。此外，元素的非字体尺寸始终是相对于其字体尺寸计算的 - 即如果您说 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

所以 padding 应该是1.67em。