基本概念
- px：就是像素pixel的缩写
- em：相对单位，1em等于当前元素的 1font-size 的大小
- rem：是CSS3新增的相对单位，1rem等于html的 1font-size的大小
- vw和vh：是相对单位，1vw是视口宽度1%，1vh是视口高度的1%
什么是视口呢？
注意：视口≠屏幕大小，视口是去掉浏览器的头部和尾部的区域
接下来演示一下各个单位的使用，代码如下
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
<body>
<div>老实憨厚的笑笑老实憨厚的笑笑老实憨厚的笑笑</div>
</body>
</html>
em
关于px这个我们很常用的这里就不再赘述，我们直接演示em，当我们在div中添加样式
text-indent:4em
由于1em相当于当前元素 1font-size 的大小，所以这里就是缩进4个字的效果
由于是根据当前元素的font-size进行变化的，所以如果我们把font-size改成20px，即
font-size:20px
根据em的效果，如果我们把代码改成这样，会出现什么样的效果
div{
width: 5em;
height: 200px;
font-size:20px;
background-color: skyblue;
}
由于宽度变成5em，那不出意外这里的效果就会变成宽度为5个字的大小
rem
根据rem的定义，其跟em的区别就是相对自己和相对html的区别，所以我们改一下代码，如下
html{
font-size: 40px;
}
div{
width: 5rem;
height: 200px;
font-size:20px;
background-color: skyblue;
}
由于我们把html的font-size改为40px，div中的width改为5rem，根据上面的原理我们可以推断，此时宽度应该占10个字
rem通常用在移动端的适配
vw和vh
如果我们将div的宽度和高度分别设为80vw和80vh，即
div{
width: 80vw;
height: 80vh;
font-size:20px;
background-color: skyblue;
}
可以看到此时div的宽和高分别占浏览器视口的80%
因为vw和vh是相对的单位，所以也会跟着视口的大小去相对的变化
扩展知识点——vmax和vmin
vmax：vw和vh中较大的值
vmin：vw和vh中较小的值
如果要使某个元素在手机横屏和竖屏时大小保持一致，可以考虑使用vmax和vmin
注：本笔记初心为帮助自己更好的学习前端，目的在于自学，请多多包涵！
