📅 最后修改于: 2023-12-03 15:14:19.849000 🧑 作者: Mango
CSS（层叠样式表）是一种用于描述网页上元素样式和布局的语言。在 CSS 中，单位用于确定元素尺寸、边距、字体大小等等。理解不同的 CSS 单位对于开发人员来说非常重要。
像素单位（px）是最常用的单位之一。像素是计算机屏幕上的最小显示单位。在 CSS 中，使用像素作为单位可以精确地指定元素的大小和位置。
.box {
width: 200px;
height: 150px;
margin: 10px;
padding: 5px;
font-size: 16px;
}
百分比单位（%）是相对于包含元素的父元素的尺寸来计算的。它可以用于调整页面布局和响应式设计，使元素相对于其容器的尺寸进行缩放。
.container {
width: 100%;
}
.box {
width: 50%;
padding: 2%;
}
em 和 rem 单位是相对于元素的字体大小进行计算的。em 单位是相对于父元素的字体大小，而 rem 单位是相对于根元素（即 <html> 标签）的字体大小。
.article {
font-size: 16px;
line-height: 1.5em;
}
.title {
font-size: 2.5rem;
}
vh 和 vw 单位是相对于视口的高度和宽度进行计算的。1 vh 等于视口高度的 1%，1 vw 等于视口宽度的 1%。这些单位通常用于创建响应式的布局。
.header {
height: 10vh;
}
.sidebar {
width: 30vw;
}
除了上述常见的单位外，CSS 还支持一些物理单位。其中最常见的是英寸（in）、厘米（cm）、毫米（mm），可以用于打印样式和特定尺寸的设计。
.page {
width: 8.5in;
height: 11in;
margin: 1cm;
}
以上是一些常用的 CSS 单位，使用不同的单位可以根据需要调整元素的尺寸和布局。合理地选择单位可以使网页在不同设备和屏幕尺寸上呈现出更好的效果。