gpt4 book ai didi

html - 除了字体大小之外,我可以使用 em 和 rem 吗?

转载 作者:行者123 更新时间:2023-12-03 08:31:32 24 4
gpt4 key购买 nike

To recap, the em unit means "my parent element's font-size" in thecase of typography. The <li> elements inside the <ul> with a class ofems take their sizing from their parent. So each successive level ofnesting gets progressively larger, as each has its font size set to1.3em — 1.3 times its parent's font size.

To recap, the rem unit means "The root element's font-size". (remstands for "root em".) The <li> elements inside the <ul> with a classof rems take their sizing from the root element (<html>). This meansthat each successive level of nesting does not keep getting larger.

这是 Mozilla 提供的解释。

我可以看到在我的其他人的代码中,他们有 padding: 1.5rem 。这意味着remem根本不与字体大小相关。是这样吗?

问题 1) 所以,如果我设置 padding:1.5rem对于一个元素,它的大小是多少?它通过查看什么来计算出自己的填充大小?

问题 2) padding:1.5em 怎么样? ?

最佳答案

是的,您可以使用 em 和 rem 来测量任何长度。

问题 1) 那么,如果我在一个元素上设置 padding:1.5rem,它的大小会是多少?它通过查看什么来计算出自己的填充大小?

如果一个元素的padding是1.5rem,那么它的padding长度就是html元素字体大小的1.5倍。在下面的示例中,外框的内边距为 1.5x 或 15px,内框的内边距为 2x 或 20px。

html{
font-size: 10px;
}

.p,.c{
border: solid 1px #f00;
}

.p{
padding: 1.5rem;
}

.c{
padding: 2rem;
}
<div class='p'>
<div class='c'></div>
</div>

问题 2)padding:1.5em 怎么样?

具有 1.5em 内边距的元素将采用最近的父元素(包括自身)的 1.5 倍的字体大小(设置了字体大小)。因此,如果将上例中外部框的字体大小设置为 8px,它将具有 1.5x 或 12px 的填充,内部元素将具有 2x 或 16px 的填充。

html {
font-size: 10px;
}

.p,
.c {
border: solid 1px #f00;
}

.p {
font-size: 8px;
padding: 1.5em;
}

.c {
padding: 2em;
}
<div class='p'>
<div class='c'></div>
</div>

关于html - 除了字体大小之外,我可以使用 em 和 rem 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64917342/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com