CSS 单位

CSS 单位用于指定元素的尺寸和位置。在编写前端样式时，选择合适的单位非常重要，因为不同的单位适用于不同的场景。在本章节中，我们将深入讨论各种常见的 CSS 单位。

像素（px）

像素是最常用的单位之一，它是相对于显示器屏幕的一个点来定义的。在大多数情况下，像素是最精确的单位，因为它不会受到浏览器或设备的缩放影响。

div {
  width: 200px;
  height: 100px;
}

百分比（%）

百分比单位是相对于父元素的尺寸来定义的。使用百分比单位可以实现响应式设计，元素的尺寸会随着父元素的大小变化而变化。

div {
  width: 50%;
  height: 50%;
}

em

em 是相对长度单位，它是相对于元素的字体大小来定义的。1em 等于当前元素的字体大小。em 单位可以用于设置元素的尺寸、内边距和外边距。

div {
  font-size: 16px;
  padding: 1em;
  margin: 2em;
}

rem

rem 也是相对长度单位，但它是相对于根元素（html 元素）的字体大小来定义的。rem 单位可以用于实现全局的响应式设计。

html {
  font-size: 16px;
}

div {
  font-size: 1.5rem;
}

vw 和 vh

vw 和 vh 分别代表视口宽度和视口高度的百分比单位。使用 vw 和 vh 单位可以实现基于视口大小的响应式设计。

div {
  width: 50vw;
  height: 50vh;
}

px、em、rem、vw 和 vh 的选择

在选择合适的单位时，需要根据具体情况来决定。一般来说，像素单位适合用于固定尺寸和布局，百分比单位适合用于响应式设计，em 和 rem 单位适合用于相对长度设置，vw 和 vh 单位适合用于基于视口大小的布局。

以上就是 CSS 单位的介绍，希望能帮助你更好地理解和运用各种单位来设计网页样式。