老生常谈CSS中的长度单位

当编写 CSS 样式表时，经常需要使用长度单位来定义各种属性，如宽度、高度、字体大小、边框大小等等。本文将为读者详细讲解各种长度单位的用法及示例。

绝对长度单位

像素（px）

像素（Pixel）是一种最常用的长度单位，它是相对于屏幕分辨率的大小来计算的。1px 等于 1/96 英寸，因此在不同屏幕上，1px 的实际物理大小可能会不同。使用像素作为单位的好处是可以实现精确的像素级别布局。

div {
  width: 200px;
  height: 100px;
  font-size: 16px;
  border: 1px solid #000;
}

英寸（in）、厘米（cm）、毫米（mm）

英寸、厘米和毫米都是绝对长度单位，它们表示的是实际的物理长度。在 Web 设计中很少使用这些单位，但是在打印样式表中会大量使用。

@media print {
  div {
    width: 3in;
    height: 2in;
    font-size: 12pt;
    border: 1pt solid #000;
  }
}

相对长度单位

百分比（%）

百分比是相对于父元素的长度来计算的。在布局中，使用百分比可以实现自适应宽度和高度，使页面具有更好的可伸缩性。

.container {
  width: 80%;
  height: 100%;
}

em（相对于当前元素的字体大小）和rem（相对于根元素的字体大小）

em 和 rem 都是相对长度单位，em 是相对于当前元素的字体大小，rem 是相对于根元素的字体大小（即 html 元素的字体大小）。在使用 em 和 rem 时，需要注意相对参照物的不同。

p {
  font-size: 16px;
  line-height: 1.5em;
}

html {
  font-size: 16px;
}

p {
  font-size: 1.2rem;
  line-height: 1.5rem;
}

vw（相对于视口宽度）和vh（相对于视口高度）

vw 和 vh 都是相对于视口的尺寸来计算的。其中，1vw 表示视口宽度的 1%，1vh 表示视口高度的 1%。使用 vw 和 vh 可以实现响应式布局。

.container {
  width: 50vw;
  height: 50vh;
}

以上就是 CSS 中常见的长度单位的攻略，希望能对读者有所帮助。