>[success] # css 单位 * css 长度单位分为两个大类型**绝对长度单位**，**相对长度单位** * **绝对长度单位**，不受其他东西影响，属于固定例如`px` * **相对长度单位** 受相对其他影响例如 **父元素的字体大小**，或者**视图端口的大小**，相对单位好处可控制使文本或其他元素的大小与页面上的其他内容相对应，常见的有`em`,`rem`,`vh`,`vw` | 相对单位 | 相对于 | | --- | --- | | em | 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width | | ex | 字符“x”的高度 | | ch | 数字“0”的宽度 | | rem | 根元素的字体大小 | | lh | 元素的line-height | | vw | 视窗宽度的1% | | vh | 视窗高度的1% | * 当设置100vw 时候即是视图窗口百分百 >[success] # 设备像素和css像素 1. 设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了； 2. 设备像素大小是不定的但实际开发中我们基本不关心设备的像素大小来设置css的像素原因是，操作系统为开发者进行抽象，提供了**逻辑像素**的概念，让你的物理像素无论多大最后计算后他们的逻辑像素都是等同的，也就是在是2k、4k的显示器设置100px *100px 大小块他们大小都是相同的 3. CSS中我们经常使用的单位也是pixel，它在默认情况下等同于设备独立像素（也就是逻辑像素）