像素和百分比
在CSS中，百分比和像素是两种常用的长度单位，它们在布局和样式设计中扮演着不同的角色。
- 像素（px）：像素是一种绝对长度单位，表示屏幕上的一个小点。它是最常用的长度单位，用于定义元素的宽度、高度、边距、填充等。例如，width: 100px; 表示元素的宽度为100个像素点。
- 百分比（%）：百分比是一种相对长度单位，表示相对于其父元素的某个属性的百分比。例如，width: 50%; 表示元素的宽度为其父元素宽度的50%。百分比单位在响应式设计中非常有用，因为它允许元素的大小根据其父元素的大小动态调整。
vw 和 vh
vw 和 vh 是 CSS3 中基于视口（Viewport）的单位，用于创建响应式设计。它们允许元素的大小根据视口的宽度或高度进行调整，从而实现自适应布局。
vw（Viewport Width）：1vw 等于视口宽度的 1%。例如，如果视口宽度为 1200px，那么 1vw 就等于 12px。这意味着，如果你设置一个元素的宽度为 50vw，它的宽度将是视口宽度的 50%。vh（Viewport Height）：1vh 等于视口高度的 1%。例如，如果视口高度为 900px，那么 1vh 就等于 9px。这意味着，如果你设置一个元素的高度为 50vh，它的高度将是视口高度的 50%。
em 和 rem
在CSS中，em和rem是两种常用的相对长度单位，它们用于表示长度和尺寸。它们的工作方式和用途有所不同
-
em: 当em与font-size属性一起使用时，它是相对于其父元素的font-size大小。例如，如果一个元素的font-size设置为16px，那么1em就等于16px。 如果em与其他属性（如width）一起使用，它是相对于目标元素的font-size来计算的。这意味着em的值会随着父元素的font-size变化而变化， -
rem:rem是相对于文档的根元素（通常是html元素）的font-size。这意味着rem的值不会随着父元素的font-size变化而变化，而是始终基于根元素的font-size。 在大多数浏览器中，默认的font-size是16px，所以1rem等于16px。如果用户改变了他们浏览器的默认字体大小，那么rem的值就会相应地放大或缩小。 这使得rem非常适合于创建响应式设计，因为它可以根据用户的设备或浏览器设置自动调整大小，同时保持一致性。
由于em的值是基于父元素的字体大小，这使得在大型项目中难以精确控制元素的大小。特别是当你需要在多个嵌套层次中精确控制元素大小时，使用em可能会变得复杂和难以管理。
比如下面的例子， 1em icon受到large类的影响， 其大小无法保持一致， 而1rem icon因为使用的是rem,其大小只受html元素的font-size影响，从而前后保持一致。
所以，rem在绝大多数情况下是一个更好的选择。
