从根 html 元素以 rem 为单位继承基于长度的 css 属性

Question

我知道 rem css 单位是一个相对单位，用于从根元素导出字体大小，即 html。

我的问题是 - 对于从 html 元素派生的任何元素，基于长度的 css 属性（如宽度、高度、填充、边距）是如何指定的 -

举个例子：

<html class="basicStyle">
<body> 
<div id="view">This is some content</div>
</body>
</html>

风格：

.basicStyle{width:500px; font-size:20px}
#view{width:3rem; font-size:2rem}

如果我在 chrome 中尝试这个，#view div 的宽度应该是 3*500px = 1500px - 但事实并非如此。

我想知道我们是否在 rem 中指定元素的宽度或填充 - 来自哪个元素以及如何计算 - 以获得计算宽度。

也欢迎任何文档。

谢谢。

Answer 1

rem单位等于根元素上font-size的值：

rem unit
Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

字体相对长度：em、ex、ch、rem 单位 (http://www.w3.org/TR/css3-values/#font-relative-lengths)

在这种情况下，rem 单位将等于 20px，因为这是 .basicStyle 中设置的 font-size。

如果您使用 rem 来计算元素的 width，它将不会基于根元素的 width，而是 font-size。因此，在您的示例中，#view 的结果 width 为 3 * 20 = 60px.

html {
  font-size: 20px;
  width: 500px;
}
#view {
  width: 3rem;
}

<div id="view">This is some content. If you inspect it the width will be 60px.</div>

从根 html 元素以 rem 为单位继承基于长度的 css 属性

Inheritance of length based css properties in rem unit from root html element

html

css

units-of-measurement

width