CSS单位：em、rem、%、vh、vw、vmin、vmax

浏览器默认的字号是16px

改变该设定：

html {
    font-size: 62.5%;
}
//此时的浏览器默认字号为10px

相当于：

px	rem
10px	1rem      1em
12px	1.2rem   1.2em
14px	1.4rem   1.4em
16px	1.6rem   1.6em

1. em：相对于父元素长度单位，1em=元素中文本的1个垂直高度

• 如果元素自身设置了font-size，那么参考文本大小就是自身的font-size大小
• 如果元素自身没有设置font-size，那么参考文本大小就是父元素的font-size大小
• 为元素设置font-size时，如果使用em作为单位，那么参考文本大小是父元素的font-size大小
• 子元素中除了font-size的em是根据父元素的font-size确定的，其他所有em都是根据自身的font-size确定的

(最后一点举例：)

 2. rem：相对于根元素长度单位

 3.vh and vw： 相对于视窗（浏览器实际显示内容的区域，即网页浏览器不包括工具栏和按钮的部分）的高度和宽度，1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度

比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px

 4.vmin and vmax：关于视口高度和宽度两者的最小值或者最大值（vmin：取当前vw和vh中较小的那一个值，vmax：取当前vw和vh中较大的那一个值）

 5、%：百分比，相对长度单位，相对于父元素的百分比值，使用时必须从根容器就设置好百分比

div{
  height：100%；
}
//该百分比要有效，父级标签的高度必须要设定（父元素的高度没有设置，则height只是一个默认值：height: auto; 当浏览器根据这样一个默认值来计算百分比高度时，只能得到undefined的结果），如果高度要等于浏览器的高度，必须同时设置html，body{ height：100%;}然后目标标签div每一个父级标签的高度都必须是100%

关于CSS中所有可以使用 % 作为属性值的样式属性，他们的基数取决于什么：

https://blog.csdn.net/weixin_45092437/article/details/123167480