在前端开发中，经常会使用不同的单位来指定元素的大小和位置。这些单位包括em、px、rem、vh和vw，它们各自有不同的特点和用途

  1. px (像素)
    像素是最基本的单位，代表屏幕上的一个点.在不同屏幕分辨率下，1px 可能对应不同的物理尺存
    固定单位，不受父元素的影响
    常用于定义精确的尺寸，如边框、文字大小等。

  2. em :
    em单位相对于父元素的字体大小来计算
    如果应用在文字上，em等于元素的字体大小。如果应用在其他元素上，1em等于父元素的字体大小。
    用于创建相对于文字大小的布局

  3. rem(根元素的字体大小)

​ rem单位始终相对于根元素 (通常是标签)的字体大小

​ 这使得它在整个页面中保持一致，不会受到嵌套元素的字体大小的影响

​ 常用于响应式设计，以便在不同屏幕尺寸下保持一致的比例。

​ 4. vh(视窗高度的百分比)

​ vh单位是相对于视窗(浏览器窗口)的高度的百分比。

​ 1vh等于视窗高度的1%。

​ 常用于创建相对于视窗高度的元素，如全屏背景

​ 4. vw(视窗宽度的百分比)

​ vw单位是相对于视窗的宽度的百分比。

​ 1vw等于视窗宽度的1%

​ 常用于创建相对于视窗宽度的元素，如响应式布局。

​ 总结：

​ px是绝对单位，其他单位是相对单位

​ em和rem用于字体大小和相对布局

​ vh和vw用于相对于视窗的尺寸使用不同的单位取决于设计需求和响应式设计目标

​ 通常，混合使用这些单位可以实现复杂的布局和样式。