一、px
整个屏幕的一个像素点。
二、em单位
- 1em：16px浏览器的默认值
- 1em = 基准值（16px）* number（1）= 16px
- 2em = 基准值（16px）* number（2）= 32px
当默认值改了，基准值也会跟着改，尺寸是基于父元素的设置的值改变的：
div {font-size: 10px;
}.box-ul li {font-size: 2em;
}
<div><!--原始设置的大小10px--><ul><li>1</li></ul><div class="box-ul"><!--设置大小为父布局的2em，即10px*2=20px--><ul><li>1</li><li><ul><!--设置大小为父布局的2em，即20px*2=40px--><li>1</li></ul></li></ul></div>
</div>
会导致内层的字体越来越大，实用性不强。
三、rem单位
- rem：相对值，基于根标签（html标签）
- 1rem = 基准值（16px）* number（1）= 16px
html {font-size: 62.5%;
}div {font-size: 30px;
}.box-ul li {font-size: 2rem;
}
<div><!--原始设置的大小30px--><ul><li>1</li></ul><div class="box-ul"><!--设置大小为html的2em，即10px*2=20px--><ul><li>1</li><li><ul><!--设置大小为html的2em，即10px*2=20px--><li>1</li></ul></li></ul></div>
</div>
四、vh/vw
- vh - height - 屏幕的百分比高
- vw - width - 屏幕的百分比宽
* {margin: 0;padding: 0;box-sizing: border-box;
}
.home {height: 100vh;width: 50vw;background: greenyellow;
}
.about {height: 43vh;width: 54vw;background: green;
}<div class="home"></div>
<div class="about"></div>五、calc
动态计算大小，例如下面动态填满一屏。
* {margin: 0;padding: 0;
}
.nav{background: blue ;height: 6rem;color: white;font-size: 3rem;
}
.banner {background: red;height: calc(100vh - 6rem);
}<ul class="nav"><li>哈哈哈</li>
</ul>
<div class="banner"></div>height: calc(100vh - 6rem);表示banner的高度为上面整屏高度减去nav的高度。
注意：运算符前后需要有空格，calc(100vh-6rem)这样写错误。
