css单位px、rem、em、vw、vh

css单位有两种分为相对单位和绝对单位
绝对单位有:px
相对单位有：rem、em、vw、vh
下面我们一起来了解这几个单位吧。

1、rem：相对根元素字体大小来计算

1rem默认为16px当根元素有font-size时1rem的单位则是font-size的大小

下面我们看这个例子

<style>
html{
             font-size: 20px; 
        }
.rem {
            width: 20rem;
            height: 20rem;
            background: green;    
        }
</style>
<div class="rem"></div>

所以此时.rem的宽高为400px；

2、em：根据父节点的字体大小计算

其实em和rem相似，不过rem是相对根元素，而em是相对父元素的

下面我们来看这个例子

<style>
.rem {
            font-size: 30px;      
        }
 .em{
            width: 20em;
            height: 20em;
            background-color: purple;
        }
</style>
<div class="rem">
            <div class="em"></div>
</div>

所以此时em的宽高为600px；

3、vw：视口宽度， 将视口宽度的1%

vh：视口高度， 将视口高度的1%

这两个不太常用，大家了解一下就可以。
今天就到这里吧，再见！