CSS 长度单位

CSS 中有相当多的属性接受长度作为值。 盒模型属性是最明显的：width，height，margin，padding，border。 但还有很多其他属性：box-shadow 的偏移量和大小，或者字体的尺寸和间距。 CSS 中所有接受的“长度”属性是什么？ 实际上有很多。

绝对长度

px

.wrap {
  width: 400px; 
}

像素与您正在观看的显示器中的实际屏幕像素无关。 它实际上是一个 角度测量。

它应该是一个在不同设备和显示器上标准化的值，但这在日益增加地不再成立。 例如，iPad mini 上的网站 呈现结果与 iPad 上相同，这意味着如果这些值以像素设置，则该标准化将不复存在。

不过，像素仍然是网络上的规范测量单位，因为它们始终如一地被处理，许多其他长度直接映射到像素，并且 JavaScript 使用像素进行对话。

in

.wrap {
  width: 4in; 
}

英寸是一种物理测量，但在 CSS 世界中，它们直接映射到像素。 请随时在评论中加入用例，我将在这里添加它们，但我从未见过对这种物理测量或其他物理测量的实际用例。

1in == 96px

cm

.wrap {
  width: 20cm; 
}

对于世界上大多数地区来说，厘米作为一种物理测量更熟悉且有用。 它们也直接映射到像素。

1cm == 37.8px

mm

.wrap {
  width: 200mm; 
}

再小一个数量级…

1mm == 0.1cm == 3.78px

字体相关的长度

Em

.wrap {
  width: 40em; 
}

一个相对单位。 最初是 一种印刷测量单位，基于当前字体的字母“M”的大写。 尽管当您更改 font-family 时长度不会改变，但当您更改 font-size 时它会改变。

没有任何 CSS 的情况下，1em 将是

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm

如果任何 CSS 更改了字体大小（在文档中的任何级别），1em 将变为新的 font-size 是多少。

使事情变得更加有趣，em 单位在应用于 font-size 时会自我相乘，因此，如果具有 font-size 1.1em 的元素位于具有 font-size 1.1em 的元素中，而该元素又位于具有 font-size 1.1em 的元素中，则结果大小将为 1.1 ✕ 1.1 ✕ 1.1 == 1.331rem（根 em）。 也就是说，即使将元素设置为 10em，也不意味着它在任何地方出现时都会保持一致的宽度。 如果 font-size 发生变化，它可能更宽或更窄 (查看证明)。

Rem

.wrap {
  width: 40rem; 
}

一个相对单位，就像 em，但它始终相对于“根”元素（即 :root {}），而不是像 em 那样使用级联。 这极大地简化了使用相对单位的工作。

值得注意的浏览器支持问题：在 IE 8、Safari 4 或 iOS 3.2 中不起作用。

Points

.wrap {
  width: 120pt; 
}

1 个点是一个物理测量单位，等于 1/72 英寸。 点是除 CSS 之外最常见的类型大小方法（这可能是它在 CSS 中得到支持的原因）。 它在语言中仍然很常见，“当然他们将这些重要信息设置为只有 8 个点的微小字体！”。

点在印刷样式表中用于对类型进行大小调整时最有意义，因为涉及物理介质，但没有任何东西可以阻止您将 pt 用于屏幕介质或任何其他接受长度的地方。

值得注意的浏览器支持问题：以前，pt 尺寸的屏幕渲染存在很大差异。 这是一个比较IE 6 与 Firefox（可能是 3.6）之间的差异。

Pica

.wrap {
  width: 12pc; 
}

与点相同，只是 1pc == 12pt。

ex

.wrap {
  width: 60ex;
}

这是一个基于当前字体 x 高度的测量。 有时这来自嵌入字体本身的信息，有时浏览器通过测量小写字形来计算它，最糟糕的情况是，它被设置为 0.5em。 它被称为“x”高度，因为它据说是基于 x 字符的高度。 要了解 x 高度，请想象一个带有突出部分（升部）的小写字符，例如小写“d”。 x 高度不包括该升部，它是该字符下方循环部分的高度。

与 em 不同，em 在更改字体族时不会改变，ex 单位在更改字体族时会改变，因为 1 个单位的值与该字体特别绑定。 (证明)。

ch

.wrap {
  width: 60ch;
}

这与 x 高度类似，只是 ch 基于数字零 (0) 的宽度，而不是 x 字符的高度。 它也会随着字体族的改变而改变。

视窗百分比长度

vw

.wrap {
  width: 10vw;
}

这是“视窗宽度”单位。1vw 等于视窗宽度的 1%。它类似于百分比，但值对于所有元素保持一致，无论其父元素或父元素的宽度如何。有点像 rem 单位始终相对于根元素。

尺寸类型是这里的主要用例。请参阅 视窗大小的排版。

值得注意的浏览器支持问题：除了最新的 iOS 6 之外，任何移动浏览器都不支持。这对所有与视窗相关的长度单位都是如此。

vh

.wrap {
  width: 10vh;
}

这与 vw（视窗宽度）单位相同，只是它基于视窗高度。

vmin

.wrap {
  width: 20vmin;
}

该值将是当前 vw 或 vh 中较小的一个。在尺寸类型的标准用例中，这在确定真实屏幕大小时，可能比单独的 vw 或 vh 更有用。

vmax

.wrap {
  width: 20vmax;
}

该值将是当前 vw 或 vh 中较大的一个。

值得注意的浏览器支持问题：基于 WebKit 的浏览器支持 vmin 但不支持 vmax（尚未）。虽然 Firefox 支持 vmax。

奇葩

百分比

.wrap {
  width: 50%; 
}

以百分比设置的长度基于父元素相同属性的长度。例如，如果一个元素以 450px 的宽度呈现，则宽度设置为 50% 的子元素将以 225px 呈现¹。

小知识：百分比在技术上并非长度单位，但由于它与长度单位密切相关，因此将其包含在此处。

更多信息

• 有关长度的规范

您的浏览器支持哪些内容？

请参阅此处:

Check out this Pen!

---

¹ 假设子元素不是内联级别元素或表格单元格，并且没有奇怪的表格样式，或者不是弹性子元素或网格单元格，或任何其他花哨的奇特样式。