CSS6种长度单位（像素、百分比、视口单位、根节点字体大小单位…）详解

CSS长度单位有多种，它们用于指定元素的宽度、高度、边距、内边距等尺寸。以下是每种单位的详细解释以及使用示例。

像素（px）

像素是CSS中最常用的长度单位之一。它是屏幕上显示图像的最小单位，可以用来定义元素的宽度、高度、边距、内边距等。一个像素等于一个CSS点（即视网膜分辨率中的像素）。

示例代码：

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  margin: 10px;
}

百分比（%）

百分比是相对于父元素的长度单位。它可以用来定义元素的宽度、高度、边距、内边距等。例如，如果父元素的宽度为100px，子元素的宽度为50%，则子元素的宽度为50px。

示例代码：

div {
  width: 50%;
  height: 50%;
  padding: 5%;
  margin: 2.5%;
}

视口单位（vw、vh、vmin、vmax）

视口单位是相对于视口的长度单位。视口是指浏览器显示内容的区域，而不包括浏览器的工具栏、地址栏等。视口单位有四种，分别是vw（视口宽度的1/100）、vh（视口高度的1/100）、vmin（视口宽度和高度中较小值的1/100）、vmax（视口宽度和高度中较大值的1/100）。

视口单位可以用来实现响应式布局，让元素的大小和位置根据视口的大小自适应调整。

示例代码：

div {
  width: 50vw;
  height: 50vh;
  padding: 5vmin;
  margin: 2.5vmax;
}

根节点字体大小单位（rem）

rem是相对于根节点（即html标签）字体大小的长度单位。例如，如果根节点的字体大小为16px，元素的宽度为2rem，则元素的宽度为32px。

rem单位可以实现基于根节点的响应式布局，让元素的大小和位置跟随根节点的字体大小调整。

示例代码：

html {
  font-size: 16px;
}

div {
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  margin: 0.25rem;
}

相对单位（em）

em和rem类似，也是相对于字体大小的长度单位。但不同的是，em是相对于最近的父元素的字体大小，而不是根节点的字体大小。

示例代码：

div {
  font-size: 16px;
}

span {
  font-size: 0.5em; /* 相对于父元素div的字体大小，即8px */
  width: 2em; /* 相对于span元素的字体大小，即16px */
  height: 2em; /* 相对于span元素的字体大小，即16px */
  padding: 0.5em; /* 相对于span元素的字体大小，即8px */
  margin: 0.25em; /* 相对于span元素的字体大小，即4px */
}

根据光栅图的单位（pt，pc）

pt是印刷单位，等于1/72英寸，常用于打印样式的制作。pc是pica的缩写，等于12pt，常用于排版和制作艺术品。在Web开发中不常用。

代码示例：

p {
  font-size: 12pt;
  line-height: 1.2pc;
  margin-bottom: 24pt;
}

总结

以上六种长度单位可以根据设计需求来合理使用，从而实现良好的布局效果。建议在开发中尽量使用相对单位，避免使用固定单位，以便实现灵活的响应式布局效果。