绝对单位:
- px : 像素,屏幕最小显示单元
- pt(点,约1.3px) / in(英寸,约96px) / cm(limi,大概37.8px) / mm(毫米) / pc(皮卡,极少使用) 这几个都是打印的时候会用到
相对单位:
- 基于字体大小的相对单位: em(父元素字体大小) / rem(根元素html的字体大小) / ex(小写字母x的高度,几乎不用,兼容性差) / ch(数字字符'0'的宽度)
- 基于视口(浏览器可视区域)的相对单位: vw(视口宽度的1%) / vh(视口高度1%) / vmin(vw和vh中较小的那个) / vmax(vmin和vmax适配横竖屏)
- 百分比: 基于父元素对应属性
新增属性:
- fr: 网格布局份数,grid布局中分配剩余空间
- lh: 基于行高的间距,1lh就是跟行高一样的高度
- dvh/dvw/dvmin/dvmax: 动态视口,用来解决vh在移动端高度溢出的问题,移动端有地址栏和导航栏,假如说手机屏幕高度700px,地址栏和导航栏共100px,一开始页面是100vh就是700px,但是由于上下会被遮住,所以浏览器为了能让用户看到被遮住的内容会渲染出来滚动条让用户能滚动,而dvh是可见区域的单位,即100dvh一开始的计算是700px-100px=600px,当在页面上滑动的时候收起地址栏和导航栏会导致可视区域变成700px了,那么100dvh就会跳变成700px
- svh/svw/svmin/svmax: 最小视口,即不管地址栏和导航栏是否收起都保持600px,剩余的留白
- lvh/lvw/lvmin/lvmax: 最大视口,始终700px