2021-09-22 css单位

Css单位px，rem，em，vw，vh的区别:

1.px
px是像素pixel的缩写，是进行网页布局的基本单位，像素px简单来说，就是相对于显示器屏幕的分辨率的大小。

2.em
em是相对长度单位。大小取决于当前对象内的父元素的font-size的文本字体尺寸，汝过当前父元素没有设置尺寸，则默认为浏览器的默认字体尺寸

3.rem
rem是CSS3中新增加的一个相对单位，rem的大小取决于HTML的根元素字体大小，一般浏览器默认是16px

html{
/*    10/16*100%=62.5%    定义一个基本字体大小62.5%     转换像素单位是10px*/
	font-size: 62.5%
}

rem方案的优点是，只要我们设置了根目录的大小，整个页面的布局比例也相应的参照根目录的比例调整

除了IE8以及更早的版本，rem支持所有的浏览器

rem与em的区别：
rem的相对长度是相对于根元素大小，而em是相对于其父元素的字体大小

vw、vh、vm
vw、vh、vmax、vmin这四个单位都是基于视口
vw是相对于视口（viewport）的宽度而定的，长度等于视口宽度的1/100
假如浏览器宽度为100px,那么1vw=1px(100/100)
vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
假如浏览器高度为200px,那么1vh就是2px
vmin和vmax是相对视口高度和宽度两者之间的最小值或者最大值
vm相对于视口宽度或者高度中较小的那个进行相对长度设定（）

%（百分比）
1.普通定位就是相对于父元素的位置进行定位
2.对于position:absolute的元素是相对于已定位的父元素
3.对于position:fixed的元素就是相对于可视窗口