长度/宽度距离单位 `px`、`rem`、`fr`、`、`

`px`和`rem`

px 和 rem 都是 CSS 中用于设置元素尺寸的单位，但它们的使用方式和计算方式有所不同。

px（像素）是一个绝对单位，1px 对应屏幕上的一个点。这个单位不会随着页面的缩放而变化，因此在不同的设备和屏幕分辨率上，1px 对应的物理尺寸可能会有所不同。
rem（root em）是一个相对单位，它是相对于 HTML 根元素的字体大小来计算的。例如，如果 HTML 的字体大小是 16px，那么 1rem 就等于 16px。如果 HTML 的字体大小是 20px，那么 1rem 就等于 20px。

在实际的开发中，px 和 rem 的选择主要取决于你的项目需求。如果你需要精确控制元素的尺寸，并且不需要考虑页面的缩放和设备的屏幕分辨率，那么可以使用 px。如果你需要创建响应式的布局，并且希望元素的尺寸能够随着根元素的字体大小的变化而自动调整，那么可以使用 rem。

是的，你可以手动指定 HTML 根元素的字体大小来改变 rem 的基准值。例如，你可以在 CSS 中这样设置:

1
2
3

html {
  font-size: 16px;
}

在上面的例子中，1 rem 将等于 16 px。你也可以使用其他 CSS 长度单位来设置 HTML 根元素的字体大小，比如 em，%，或者 vw。

值得注意的是，如果你在其他地方没有特别指定字体大小，那么浏览器通常会默认 HTML 根元素的字体大小为 16px。因此，如果你没有设置 HTML 根元素的字体大小，那么 1 rem 通常会等于 16 px。

在实际开发中，你可以根据需要调整 HTML 根元素的字体大小，以便更灵活地使用 rem 单位。

fr 是 CSS Grid 布局中引入的一种新的长度单位，它表示 Grid 布局中剩余空间的一部分。fr 是 fraction（分数）的缩写，用于平均分配剩余空间。

例如，如果你有一个网格布局，你可以使用 fr 单位来定义每一列或每一行的大小。假设你想要创建一个三列的网格，每列的宽度都相同，你可以这样写:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

在上面的例子中，.container 的宽度被分成三个相等的部分，每一列的宽度都是 1fr。这意味着每一列都会占用剩余空间的三分之一。

值得注意的是，fr 单位可以与其他 CSS 长度单位（如 px，%，em 等）混合使用。例如，如果你想要创建一个网格，其中一列的宽度固定为 50px，剩余的空间被其他两列均分，你可以这样写:

.container {
  display: grid;
  grid-template-columns: 50px 1fr 1fr;
}

在上面的例子中，第一列的宽度固定为 50px，剩余的空间被第二列和第三列均分。这种方式可以方便地创建响应式布局。

总的来说，fr 是一个非常有用的 CSS 长度单位，它可以帮助你更灵活地创建网格布局。