1. px (pixel): The most common unit, which represents a point on the screen and is relative to the screen resolution. On different devices, the size of a pixel may be different, so when using px as the unit, you need to pay attention to the screen density of different devices.
2. em: relative to the size of the text font in the current object, that is, a multiple of the specified font size. For example, if the current element's font size is 16px, then 1em is equivalent to 16px.
3. rem: The font size relative to the root element html, that is, a multiple of the specified font size. For example, if the font size of the root element is 16px, then 1rem is equivalent to 16px, and rem can avoid the complications caused by nested calculations in em.
4. % (percentage): relative to the size of the parent element. For example, if the width of an element is set to 50%, the width of the element will be relative to the width of its parent element, that is, it will occupy 50% of the width of the parent element.
5. vw (viewport width): Percentage relative to the viewport width, 1vw is equal to 1% of the viewport width. For example, if the viewport width is 1000px, then 1vw is equal to 10px.
6. vh (viewport height): Percentage relative to the viewport height, 1vh is equal to 1% of the viewport height. For example, if the viewport height is 800px, then 1vh equals 8px.
7. rpx (responsive pixel): It is a CSS unit used in mini programs that is independent of device pixel density. In the development of small programs, in order to adapt to screens of different densities, rpx can be used as the unit. For example, 1rpx will be automatically converted to different pixel values on screens of different densities.
In short, choosing the appropriate CSS unit allows us to more flexibly control the size, position and other attributes of page elements, thereby improving the responsiveness and user experience of the web page.