css里的相对单位有哪些

在CSS（层叠样式表）中，相对单位是一种非常重要的概念，它们在网页布局和设计中发挥着关键作用。下面就来详细介绍一下CSS里常见的相对单位。

首先是em单位。em是相对于父元素的字体大小来计算的。比如，如果父元素的字体大小设置为16px，那么1em就等于16px。如果子元素的字体大小设置为2em，那么它的实际字体大小就是32px。em单位不仅可以用于设置字体大小，还可以用于设置其他属性，如宽度、高度、边距等。这种相对性使得在调整父元素字体大小时，子元素的相关属性也会相应地进行调整，方便实现整体的布局变化。

接着是rem单位。rem是相对于根元素（即html元素）的字体大小来计算的。这就意味着，无论元素在文档树中的位置如何，只要根元素的字体大小确定了，rem单位所表示的大小就是固定的。例如，当根元素字体大小为10px时，1rem就是10px。使用rem单位可以更方便地进行全局的尺寸控制，避免因为嵌套层级过多而导致的尺寸计算复杂问题。

还有vw和vh单位。vw表示视口宽度的百分比，1vw等于视口宽度的1%。例如，设置一个元素的宽度为50vw，那么它的宽度就会始终是视口宽度的一半。vh则表示视口高度的百分比，使用方式与vw类似。这两个单位在制作响应式页面时非常有用，可以根据视口的大小自动调整元素的尺寸。

另外，%单位也是常见的相对单位。它通常相对于父元素的相应属性值来计算。比如，一个元素的宽度设置为50%，那么它的宽度就是父元素宽度的一半。

CSS中的相对单位为网页设计师提供了更灵活、更高效的布局和设计方式。通过合理运用这些相对单位，可以使网页在不同设备和屏幕尺寸下都能呈现出良好的视觉效果。