从根html元素继承rem单元中基于长度的css属性
[英]Inheritance of length based css properties in rem unit from root html element
问题描述
I know that the rem css unit is a relative unit which is used to derive font sizes from the root element ie html. 
我知道rem css单位是一个相对单位，用于从根元素即html导出字体大小。
My question is- how are length based css properties like width, height, padding, margin, if specified in rem - for any element derived from the html element. 我的问题是-如果在rem中指定了基于长度的css属性（如宽度，高度，填充，边距），则该属性是如何从html元素派生的。
As an example: 举个例子：
<html class="basicStyle">
<body>
<div id="view">This is some content</div>
</body>
</html>
Style: 样式：
.basicStyle{width:500px; font-size:20px}
#view{width:3rem; font-size:2rem}
If I try this out in chrome, the width of the #view div should be 3*500px = 1500px - However it is not so. 如果我在chrome中进行尝试，则#view div的宽度应为3 * 500px = 1500px-但是事实并非如此。
I want to know if we specify the width or padding of an element in rem - from which element and how is it calculated - to get the computed width. 我想知道是否在rem中指定元素的宽度或填充-从哪个元素以及如何计算-以获得计算的宽度。
Any documentation is welcome too. 也欢迎任何文档。
Thanks. 谢谢。
1 个解决方案
解决方案1
1 已采纳 2015-09-10 07:37:26
The rem unit is equal to the value of the font-size on the root element: rem单位等于根元素上的font-size值：
rem unit
Equal to the computed value of font-size on the root element.
Font-relative lengths: the em, ex, ch, rem units ( http://www.w3.org/TR/css3-values/#font-relative-lengths ) 相对字体长度：em，ex，ch，rem单位（ http://www.w3.org/TR/css3-values/#font-relative-lengths ）
In this case the rem unit will be equal to 20px as this is the font-size set in .basicStyle . 在这种情况下， rem单位将等于20px因为这是.basicStyle设置的font-size 。
If you use rem to compute the width of an element it will not be based on the width of the root element but the font-size . 如果使用rem计算元素的width ，则它不会基于根元素的width ，而是基于font-size 。 In your example #view will therefore have a resultant width of 3 * 20 = 60px . 因此，在您的示例中， #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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.