%
- padding和margin的%垂直水平方向都是基于父元素的宽度计算
px（pixel，像素）
是一个虚拟长度单位，是计算机系统的数字化图像长度单位。物理像素（px）
设备能控制显示的最小单位逻辑像素（px）
又称css像素，浏览器使用的抽象单位，而不是实际存在的设备独立像素（dip或dp）
独立于设备的用于逻辑上衡量像素的单位，包括了CSS像素设备像素缩放比（dpr）
- dpr=物理像素/逻辑像素
- 1px = (dpr)^2 * dp
- dpr=ppi/160
屏幕像素密度（PPI）
- 每英寸内有多少个设备像素点（物理像素）
- PPI越高，像素数越高，图像越清晰
屏幕分辨率（XxY）
指屏幕上垂直有x个物理像素，水平有y个物理像素。
屏幕尺寸（x in）
指屏幕对角线的长度有x英寸
em（相对长度单位）
- 子元素字体大小的em是相对于父元素字体大小，如果自身定义了font-size按自身来计算。
- 元素的width/height/padding/margin用em的话是相对于自身的font-size。
- 最多取到小数点后三位。
rem（根em）
- 相对于html元素上字体的大小。
- 1rem等于html元素上字体设置的大小。
vw、vh
- 1vw等于视窗宽度的1%。
- 1vh等于视窗高度的1%。
| 单位 | 含义 |
|---|---|
| vw | 相对于视图窗口的宽度，视窗宽度为100vw |
| vh | 相对于视图窗口的高度，视窗高度为100vh |
| vmin | vw和vh中的较小值 |
| vmax | vw和vh中的较大值 |
