一、像素（px）
像素是最常用的 CSS 单位。完美的在屏幕上显示，但在不同的分辨率下可能会导致大小不同。实际上，当您使用像素时，您在屏幕上设置长度。
/* 示例代码 */
.box {
width: 300px;
height: 100px;
font-size: 16px;
border: 1px solid #000;
}
像素单位的使用非常灵活，能够适应不同的场景，但是在不同的设备上可能会出现显示不一致的情况，如在大屏上显示过小等。
二、百分比（%）
百分比单位是相对的长度单位，相对于父元素的大小。例如，如果您将一个元素的宽度设置为 50%，它将占用其父元素宽度的一半。
/* 示例代码 */
.parent {
width: 400px;
height: 300px;
}
.child {
width: 50%;
height: 50%;
background-color: #f00;
}
百分比单位经常用于实现响应式布局和设置元素相对于父元素的大小和位置。
三、视口单位（vw、vh、vmin、vmax）
视口单位是相对于视口大小的单位，视口大小是用户看到的区域。视口单位的大小随着视口的改变而改变。
四种视口单位：
- vw（Viewport Width）：1vw 等于视口宽度的 1%。
- vh（Viewport Height）：1vh 等于视口高度的 1%。
- vmin：1vmin 等于视口宽度和高度中较小值的 1%。
- vmax：1vmax 等于视口宽度和高度中较大值的 1%。
/* 示例代码 */
.box {
width: 50vw;
height: 50vh;
font-size: 5vmin;
border: 1vmax solid #000;
}
视口单位可以用于创建占据整个屏幕的元素，例如全屏背景或占据屏幕一半的元素。
四、字号单位（em、rem）
字号单位用于设置字体大小。em 和 rem 是两种常用的字号单位。
em：相对于它的父元素的字体大小。如果未设置父元素的字体大小，那么 em 将相对于浏览器的默认字体大小。
/* 示例代码 */
.parent {
font-size: 18px;
}
.child {
font-size: 1.2em;
}
rem：相对于根元素（通常是 “ 元素）的字体大小。如果未设置根元素的字体大小，那么 rem 将相对于浏览器的默认字体大小。
/* 示例代码 */
html {
font-size: 16px;
}
.box {
font-size: 0.875rem;
}
使用字号单位可以使文本大小自适应，而不受设备分辨率的影响。
五、其他单位（cm、mm、in、pt、pc）
这些单位最初被设计用于打印，但后来也被用于 web 上的元素的尺寸和位置。例如，您可以使用 pt 单位来设置文本大小。
这些单位在设备分辨率上不会缩放，而只会在打印时保持不变。因此，不建议在 web 上使用这些单位。
总结
本文详细介绍了常用的 CSS 单位：像素、百分比、视口单位、字号单位和其他单位。每种单位都有自己的优点和限制，需要根据具体情况来选择合适的单位。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/271820.html
微信扫一扫 
支付宝扫一扫 