在网页设计中，书写能力至关重要，尤其对于想要成为一名出色的前端工程师来说。深入理解并熟练掌握各种网页常用基本单位，是创作出优秀页面的关键。
在传统的网页开发过程中，我们经常使用px、%、em等单位，因为它们具有良好的兼容性，广泛适用于大多数项目。随着技术的发展，CSS3引入了更多先进的长度单位，如rem、vw、vh、vm等，为开发响应式页面提供了更多可能性。
那么，让我们来详细探究一下这些单位的具体应用和特点。
1. px（像素）
2. em
em是一个相对长度单位，其大小依赖于父元素的字体大小。如果当前行内文本的字体大小未被设置，浏览器会采用默认的字体大小（通常为16px）作为参考。整个页面内1em的值并不是固定的。
3. %（百分比）
百分比单位通常与父元素相关，但其关系并非绝对。对于普通元素，它是相对于父元素的尺寸；对于position属性设置为absolute或fixed的元素，则分别与已定位的父元素或可视窗口（ViewPort）相关。
4. rem
5. vw（视口宽度）
vw是CSS3新引入的单位，代表视口宽度的百分比。视口即浏览器窗口的大小，不受显示器分辨率影响。这意味着我们无需再为不同电脑的分辨率而烦恼自适应问题。例如，当浏览器宽度为1200px时，1vw等于12px。与百分比不同的是，vw始终与可视窗口的宽度相关。
6. vh（视口高度）
vh与vw类似，代表视口高度的百分比。视口高度即浏览器窗口的高度，被均分为100单位的vh。1vh即为视口高度的1%。
vm单位也是CSS3引入的新单位，它相对于视口的宽度和高度中较小的一个。若浏览器的高度为800px、宽度为1000px时，取两者中较小的值作为vm的基准值进行划分。由于vm单位的兼容性问题，目前使用较少。