在使用CSS属性设置元素大小时，您可能会注意到两个选项，一个是绝对单位，另一个是相对单位。绝对单位是相同的，是固定的，可以使用cm、mm、px来设置大小。另一方面，相对单位是相对于其他东西的，可以是父元素或任何其他元素。
在本教程中，我们将研究CSS中em和rem单位之间的比较。
The Em unit
em单位使得可以改变相对于其父元素的字体大小的元素的大小。这意味着如果父元素的大小发生变化，子元素的大小也会发生变化。
Let’s look at an example to understand what does the em unit do.
立即学习“前端免费学习笔记（深入）”；
Example
在这个例子中，我们将把子元素的字体大小改为35px。子元素的边距也将改为50px。
在这里，我们首先创建了一个父元素，然后将其大小设置为17.5像素，子元素的字体大小设置为1em，这意味着子元素的字体大小将是父元素的两倍，元素的边距将保持不变。让我们来看一下代码的输出结果。
Note − The usage of the font-size property. The font-size is relative to the father (parent) element when it is used on other properties.
Difference between em and rem .father { paddding: 0px; font-size: 16px; } .son { margin: 1em; font-size: 1em; }This is the Father elementThis is Son element
在上面的输出中，有一个父元素和一个子元素。在输出中，子元素的大小与父元素相同
rem单位
单位rem相对于元素根的字体大小，即html元素。如果没有指定字体大小，则使用浏览器的默认值，不考虑父元素，只考虑根元素。
Example
We will be keeping the font size of the child element to 50px and then setting the margin of the element to 40px. The size of the rem unit will be relative for all declarations unlike em.
In the following example, we first used the root element and then created a parent element and the child element. We then set the font size of the root element to 18px and the font-size of the parent to 15px. The size of the font of the child element was then set to 1.5rem which means double the size of the root element and not the parent element. Let’s look at the output to see what the rem unit does.
The difference between em and rem units html { font-size: 18px; } .son { font-size: 2rem; margin: 1.5rem; } .father { font-size: 13px; }This is parentThis is Child in rem unit system
You can see in the above output that the child element is not the double of the parent element but it is the double of the root element.
The unit em, is relative to the font-size of its nearest parent and it can lead to the compounding effect. The rem unit, is relative to the HTML root font size but it does not lead to the compounding effect.
CSS中的Em与Rem单位
The units include em, vh, vw, and rem. The relative units are also known as scalable units and plays an important role in the responsiveness of the website. The em and the rem units are both scalable and relative. The em unit is relative to the font size of the parent element in the HTML document and the rem unit, is relative to the font root of the whole document.
Conclusion
em单位和rem单位之间的区别在于em单位相对于父元素进行计算，而rem单位相对于根元素进行计算，这两种单位都属于相对单位，它们有助于使网站具有响应式布局。这些单位有助于设置特定元素的大小。
以上就是CSS 中的 Em 与 Rem 单位？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625379.html
微信扫一扫 
支付宝扫一扫 
