单位

1 介绍

CSS中的单位用来指定长度、大小和位置等属性的值。这些单位大致可以分为两类：绝对单位和相对单位。

2 绝对单位

绝对单位是固定的长度，不会根据屏幕或页面的尺寸改变。

px (像素)：显示器上的一个点，是屏幕分辨率的单位。

div {
  width: 100px; /* 宽度为屏幕上的100个像素点 */
}

pt (点)：主要用于打印文档，1pt等于1/72英寸。

p {
  font-size: 12pt; /* 字体大小为12点 */
}

pc (派卡)：1pc等于12pt，通常用于排版。

body {
  font-size: 10pc; /* 字体大小为120pt */
}

3 相对单位

相对单位是相对于其他尺寸的单位，它们的值会根据上下文环境变化。

em：相对于当前元素的字体尺寸大小。

div {
  width: 2em; /* 宽度为当前字体大小的两倍 */
}

rem (root em)：相对于根元素（html元素）的字体尺寸大小。

html {
  font-size: 16px; /* 根元素字体大小为16像素 */
}
body {
  font-size: 1rem; /* 相对于根元素的字体大小 */
}

ex：相对于当前字体的x-height（小写字母的平均高度）。

p {
  line-height: 1.2ex; /* 行高为字体x-height的1.2倍 */
}

vw (视口宽度单位)：相对于视口宽度的百分比。

body {
  width: 80vw; /* 宽度为视口宽度的80% */
}

vh (视口高度单位)：相对于视口高度的百分比。

div {
  height: 50vh; /* 高度为视口高度的50% */
}

vmin：相对于视口的较小维度（宽度或高度）的百分比。

img {
  max-width: 100vmin; /* 最大宽度为视口较小维度的100% */
}

vmax：相对于视口的较大维度（宽度或高度）的百分比。

.container {
  max-height: 80vmax; /* 最大高度为视口较大维度的80% */
}

4 总结

CSS中的单位就像是尺子，用来测量和指定网页元素的大小和位置。绝对单位像是固定长度的尺子，不会变；相对单位则像是可以伸缩的尺子，会根据环境变化。在设计网页时，合理选择和使用这些单位可以帮助你创建出适应不同屏幕尺寸和设备的网站。