前端小知识：em和rem，CSS中的相对长度单位

CSS中的长度单位

在CSS中，长度单位主要分为两类：绝对长度单位和相对长度单位。

• 绝对长度单位：px、cm、mm、in、pc、pt
• 相对长度单位：em、rem、vw、vh、ex、ch、lh、vmin、vmax

em和rem的用法

em和rem都是相对长度单位，它们都是基于font-size的值来计算的。

• em：em的值等于font-size的值。例如，如果font-size的值为16px，那么1em就等于16px。
• rem：rem的值等于根元素（html元素）的font-size的值。例如，如果html元素的font-size的值为16px，那么1rem就等于16px。

em和rem的区别

em和rem都是相对长度单位，但它们的区别在于em的值是基于父元素的font-size的值来计算的，而rem的值是基于根元素（html元素）的font-size的值来计算的。

em和rem的应用场景

em和rem都可以在CSS中使用，但它们适用于不同的场景。

• em：em通常用于设置文本的大小。例如，我们可以使用em来设置段落文本的大小、标题的大小、按钮的文字大小等。
• rem：rem通常用于设置元素的边距、内边距、外边距等。例如，我们可以使用rem来设置元素的边距、内边距、外边距、元素之间的间距等。

em和rem的优缺点

em和rem都有各自的优缺点。

• em的优点：em的值是基于父元素的font-size的值来计算的，因此当父元素的font-size改变时，em的值也会跟着改变。这使得em非常适合用于设置文本的大小，因为当用户调整浏览器的字体大小时，文本的大小也会跟着改变。
• em的缺点：em的值是基于父元素的font-size的值来计算的，因此当父元素的font-size改变时，em的值也会跟着改变。这使得em不适合用于设置元素的边距、内边距、外边距等，因为当用户调整浏览器的字体大小时，元素的边距、内边距、外边距等也会跟着改变。
• rem的优点：rem的值是基于根元素（html元素）的font-size的值来计算的，因此当根元素（html元素）的font-size改变时，rem的值不会跟着改变。这使得rem非常适合用于设置元素的边距、内边距、外边距等，因为当用户调整浏览器的字体大小时，元素的边距、内边距、外边距等不会跟着改变。
• rem的缺点：rem的值是基于根元素（html元素）的font-size的值来计算的，因此当根元素（html元素）的font-size改变时，rem的值也不会跟着改变。这使得rem不适合用于设置文本的大小，因为当用户调整浏览器的字体大小时，文本的大小不会跟着改变。

结论

em和rem都是非常有用的相对长度单位，它们都有各自的优缺点。在CSS中，我们可以根据不同的场景来选择使用em或rem。