CSS-度量单位

在 CSS 中，度量单位用于描述元素的尺寸。本文将介绍 CSS 中常用的度量单位及其用途。

像素（px）

像素（Pixel）是 CSS 中常用的度量单位，具体表示为相对于显示器或设备屏幕的一个独立的单元。相对于其他度量单位，像素更准确地表示元素的大小和位置。

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

在上述代码中，div 元素的宽度为 200 像素，高度为 100 像素。

百分比（%）

百分比是相对于当前对象的父元素的计量单位，它的数值在 0% 到 100% 之间。通常使用百分比调整元素的大小，以便对移动设备和桌面设备进行适配。

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

在上述代码中，div 元素的宽度和高度都为其父元素的一半。

电磁单位（em）

电磁单位（em）是相对于当前元素的字体大小计算出来的倍数。如果当前元素的字体大小为 16 像素，则 1em 就等于 16 像素。在嵌套元素中非常有用。

p {
  font-size: 16px;
}

span {
  font-size: 0.5em;
}

在上述代码中，span 元素的字体大小为其父元素的一半，即 8 像素。

实际尺寸单位（cm、mm、in、pt、pc）

实际尺寸单位（cm、mm、in、pt、pc）是相对于视口（Viewport）的物理尺寸计算出来的。这些单位通常用于打印或打印预览。

div {
  width: 2.54cm;
  height: 1.27cm;
}

在上述代码中，div 元素的宽度为 1 英寸（即 2.54 厘米），高度为 0.5 英寸（即 1.27 厘米）。

Viewport 百分比单位（vw、vh、vmin、vmax）

Viewport 百分比单位（vw、vh、vmin、vmax）是相对于视口的尺寸计算出来的，其中 vw 和 vh 分别表示视口的宽度和高度的百分比，而 vmin 和 vmax 则是视口宽度和高度的最大值和最小值中的最小值和最大值。

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

在上述代码中，div 元素的宽度和高度都为视口宽度和高度的一半。

总结

以上是 CSS 中常用的度量单位介绍，它们各自有各自的用途，了解并合理使用它们可以更好地调整元素的大小和位置。