CSS计量单位
在早期的css中，计量单位有px、pt、in、cm、em、%等单位，在css3之后，新增了单位rem、vw、vh、vmin、vmax等单位。
分类
- 绝对长度单位：px、pt、in、cm等
- 相对长度单位：em、rem、vw、vh、vmin、vmax等
常见的CSS计量单位及其用法
1. 像素(px)
像素是最常见的计量单位之一，在不同的设备上，像素的大小会有所不同。但它不受其他属性的影响，是一个绝对单位。在实际应用中，我们经常用px来定义字体大小、边框宽度等。例如：
font-size: 16px;
border: 1px solid #000;
2. 相对长度单位(em、rem)
- em：相对于父元素的字体大小来计算。如果父元素没有设置font-size属性，那么默认1em = 16px。例如：
font-size: 1.2em; /* 相对于父元素的字体大小的1.2倍 */
- rem：相对于根元素html的字体大小来计算。如果html没有设置font-size属性，那么默认1rem = 16px。例如：
font-size: 1.5rem; /* 相对于根元素的字体大小的1.5倍 */
3. 百分比(%)
百分比单位可以相对于父元素的某个属性值进行计算，特别适用于创建灵活的布局。例如，定义容器的宽度和高度时经常使用百分比单位。
width: 50%; /* 宽度为父元素宽度的50% */
height: 75%; /* 高度为父元素高度的75% */
4. 视口单位(vw、vh、vmin、vmax)
- vw：相对于视口宽度来计算，1vw = 1%视口宽度。
- vh：相对于视口高度来计算，1vh = 1%视口高度。
- vmin：相对于视口的最小值来计算，1vmin = 1%视口的最小值。
- vmax：相对于视口的最大值来计算，1vmax = 1%视口的最大值。
width: 50vw; /* 宽度为视口宽度的50% */
height: 75vh; /* 高度为视口高度的75% */
font-size: 3vmin; /* 字体大小为视口最小边的3% */
border: 1vmax solid #000; /* 边框宽度为视口最大边的1% */
希望本文能够帮助读者更好地理解和运用CSS常见的计量单位，为优秀的前端开发之路添砖加瓦。
