CSS 单位 - %、em、rem、px、vh、vw

在 CSS 中，我们可以使用不同的单位来指定元素的尺寸和定位。不同的单位适用于不同的场景和需求。在本文中，我们将介绍以下六种常见的 CSS 单位：

• 百分比（%）
• em（em）
• 相对于根元素的em（rem）
• 像素（px）
• 视窗高度（vh）
• 视窗宽度（vw）

百分比（%）

百分比单位可以用来相对于父元素的尺寸来定义元素的尺寸。例如，如果一个 div 的宽度设置为50%，那么它的宽度将是父元素宽度的一半。

div {
  width: 50%;
}

em（em）

em 单位是相对于元素的字体大小来计算的。如果一个元素的字体大小为 16px，那么 1em 等于 16px，0.5em 等于 8px。

p {
  font-size: 1.2em;
  margin-bottom: 1em;
}

相对于根元素的em（rem）

rem 单位是相对于根元素（通常是整个 HTML 文档）的字体大小来计算的。相比于 em 单位，rem 单位更容易控制，并且可以避免多层嵌套时的样式重叠问题。

body {
  font-size: 16px;
}

div {
  width: 10rem; /* 等于 160px (16 * 10) */
}

像素（px）

像素单位是固定的，无视任何其他因素。使用像素单位指定元素的尺寸和位置会产生固定的效果。

h1 {
  font-size: 24px;
  padding: 10px;
}

视窗高度（vh）

vh 单位是相对于视窗高度的百分比单位，1vh 等于视窗高度的 1%。这可以用来创建自适应的元素。

header {
  height: 80vh; /* 占视窗高度的 80% */
}

视窗宽度（vw）

vw 单位是相对于视窗宽度的百分比单位，1vw 等于视窗宽度的 1%。这也可以用来创建自适应的元素。

section {
  width: 50vw; /* 占视窗宽度的 50% */
}

以上就是 CSS 中常见的单位的介绍。根据不同的需求和情况，选择合适的单位是重要的，可以帮助我们实现各种各样的页面效果。