CSS 中px、%、vh、vw、em、rem、vmin、vmax单位之间的区别详解

1. 像素（Pixel）：px

   • 示例：height: 100px;
   • 描述：像素是屏幕上的一个点，是最常用的长度单位之一。指定固定的像素值将元素的高度设置为具体的像素数。

2. 百分比（Percentage）：%

   • 示例：height: 50%;
   • 描述：百分比是相对于包含块的百分比。例如，height: 50%; 表示元素的高度为包含块高度的50%。

3. 视口高度（Viewport Height）：vh

   • 示例：height: 50vh;
   • 描述：vh 表示视口高度的百分比。例如，height: 50vh; 表示元素的高度为视口高度的50%。

4. 视口宽度（Viewport Width）：vw

   • 示例：height: 30vw;
   • 描述：vw 表示视口宽度的百分比。例如，height: 30vw; 表示元素的高度为视口宽度的30%。

5. EM（相对于父元素的字体大小）：em

   • 示例：height: 2em;
   • 描述：em 单位是相对于元素的字体大小。例如，height: 2em; 表示元素的高度是其字体大小的两倍。

6. REM（相对于根元素的字体大小）：rem

   • 示例：height: 3rem;
   • 描述：rem 单位是相对于根元素（html）的字体大小。例如，height: 3rem; 表示元素的高度是根元素字体大小的三倍。

7. Viewport 最小单位（Viewport-percentage Minimum）：vmin

   • 示例：height: 5vmin;
   • 描述：vmin 表示视口宽度和高度中的最小值的百分比。例如，height: 5vmin; 表示元素的高度是视口宽度和高度中的最小值的5%。

8. Viewport 最大单位（Viewport-percentage Maximum）：vmax

   • 示例：height: 8vmax;
   • 描述：vmax 表示视口宽度和高度中的最大值的百分比。例如，height: 8vmax; 表示元素的高度是视口宽度和高度中的最大值的8%。