CSS中单位px、rem、em、vh、vw之间的区别有哪些
在CSS中，有多种单位可以用来指定长度、宽度、高度等。其中，常用的单位有px、rem、em、vh和vw。这些单位之间的区别涉及到它们的意义、使用场景，以及浏览器缩放等因素，下面详细介绍。
1、px（像素）
px是简写，它的全称是pixel，表示像素单位。它是最基本的单位，它可以指定元素的精确大小，例如：
div{
width:100px;
height:100px;
}
使用px单位时，元素的大小不会随着浏览器的缩放而变化。px的优点是精确度高，缺点是不能自适应浏览器的缩放。
2、rem（root em，根em）
rem也是一个相对单位，它是相对于根元素（即html元素）的font-size来计算的。例如：
html{
font-size:14px;
}
div{
width:10rem;
height:10rem;
}
这段代码中，div的宽高都是140px（10乘以14），因为html的font-size是14px。如果改变html的font-size，div的宽高也会跟着变化。rem的优点是可以根据根元素的变化而自适应，缺点是需要额外指定根元素的font-size。
3、em（em）
和rem一样，em也是一个相对单位，但它不是相对于根元素，而是相对于父元素的font-size来计算。例如：
div{
font-size:14px;
}
p{
font-size:1.5em;
}
这段代码中，p元素的字体大小是21px（14乘以1.5），因为它的父元素是div，div的font-size是14px。em的优点是可以根据父元素的变化而自适应，缺点是它受到父元素的影响比较大，不太灵活。
4、vh（视口高度）
vh是根据视口高度来计算的流式单位，它表示视口高度的百分比。例如：
div{
height:50vh;
}
这段代码中，div的高度是视口高度的50%。vh的优点是可以根据视口大小自适应，缺点是只能适用于高度方向上，不适用于宽度方向。
5、vw（视口宽度）
vw和vh类似，但它是根据视口宽度来计算的。例如：
div{
width:50vw;
}
这段代码中，div的宽度是视口宽度的50%。vw的优点和vh一样，可以根据视口大小自适应，缺点也和vh一样，只适用于宽度方向上。
总的来说，这些单位各有特点，需要根据实际需求选择合适的单位。常用的单位有px和rem，前者适用于静态布局，后者适用于响应式布局。vh和vw适用于视口相关的布局，em适用于嵌套关系比较简单的布局。