CSS 长度单位 | CSS-Tricks

概述

许多 CSS 属性都接受数字作为值。有时这些是整数。有时它们是小数和分数。其他时候，它们是百分比。无论它们是什么，数字后面的单位决定了数字的计算长度。而“长度”指的是任何可以用数字描述的距离，例如元素的物理尺寸、时间度量、几何角度……各种各样的东西！

在撰写本文时，CSS 值和单位模块级别 4 规范定义了许多不同的 CSS 单位——其中许多是相对较新的（这个双关语稍后会讲明白）。

快速参考

绝对单位

单位	名称
`cm`	厘米
`mm`	毫米
`Q`	四分之一毫米
`in`	英寸
`pc`	picas
`pt`	磅
`px`	像素

字体单位

单位	相对于…
em	元素的字体大小，或其最近的父容器
ex	元素字体的 x 高度
cap	元素字体的帽高（大写字母的标称高度）
ch	所用字体的“0”字符的宽度
ic	所用字体的完整字形的平均宽度，以“水”（`U+6C34`）字形表示
rem	在根 (`html`) 元素上设置的 `font-size` 值
lh	在元素上设置的 `line-height` 值
rlh	在根 (`html`) 元素上设置的 `line-height` 值
vw	视口宽度的 1%
vh	视口高度的 1%
vi	根元素内联轴上视口大小的 1%
vb	根元素块轴上视口大小的 1%
vmin	等于 `vw` 或 `vh` 中较小的 1%
vmax	等于 `vw` 或 `vh` 中较大的 1%

视口单位


`vw`	视口宽度的 1%
`vh`	视口高度的 1%
`vi`	根元素内联轴上视口大小的 1%
`vb`	根元素块轴上视口大小的 1%
`vmin`	等于 `vw` 或 `vh` 中较小的 1%
`vmax`	等于 `vw` 或 `vh` 中较大的 1%

容器单位

单位	相对于
`cqw`	查询容器宽度的 1%
`cqh`	查询容器高度的 1%
`cqi`	查询容器内联大小的 1%
`cqb`	查询容器块大小的 1%
`cqmin`	`cqi` 或 `cqb` 中较小的值
`cqmax`	`cqi` 或 `cqb` 中较大的值

角度单位

单位	描述
`deg`	一个圆圈有 360 度。
`grad`	一个圆圈有 400 梯度。
`rad`	一个圆圈有 2π 弧度。
`turn`	一个圆圈有 1 圈。

时间单位

单位	描述
`s`	一分钟有 60 秒，但没有用于分钟的单位。
`ms`	一秒钟有 1000 毫秒。

分数单位

单位	描述
`fr`	网格容器中自由空间的一个分数。

分辨率单位

单位	描述
`dpi`	每英寸点数
`dpcm`	每厘米点数
`dppx`、`x`	每像素点数单位

频率单位

单位	描述
`Hz`	表示每秒发生的次数
`kHz`	一千赫兹等于 1000 赫兹。

简介

您将在 CSS 中看到很多数字。以下是一些示例？

/* Integers */
1

/* Pixels */
14px

/* em */
1.5em

/* rem */
3rem

/* Percentage */
50%

/* Characters */
650ch

/* Viewport units */
100vw
80vh
50dvh

/* Container units */
100cqi
50cqb

虽然这些都意味着不同的东西，但它们本质上做的事情相同：在 CSS 中定义元素的尺寸。我们需要 CSS 中的单位，因为它们决定了如何在页面上调整元素的大小，无论是盒子的 height、图像的 width、标题的 font-size、两个元素之间的 margin、动画运行的时长等等。如果没有它们，浏览器将无法知道如何将数字应用于元素。

那么，到底什么是 px？这个叫做 rem 的东西是什么？它们与其他长度单位有什么区别？单位定义了我们正在处理哪种类型的数字，并且每个单位都执行不同的操作，为我们在 CSS 中调整事物的大小提供了多种方法。

数字类型

你可能会认为数字就是数字，你也没错。数字就是数字！但我们可以区分几种不同的数字类型，这对于讨论我们附加给它们的各种单位类型很有帮助，因为“数字”可以表示很多不同的东西。

整数（字面意思是无单位的数字，例如 3）
数字（与整数相同，只是以小数测量，例如 3.2）
尺寸（带单位的数字或整数，例如 3.2rem）
比率（两个数字相除的商，例如 3/2）
百分比（例如 3%）

明白了吗？它们都是数字，但有一些细微差别，使它们略有不同。

从这里开始，我们可以将 CSS 中的数字视为两种特定类型的单位：绝对单位和相对单位。让我们从分解这些单位开始深入探讨 CSS 长度单位。

绝对单位

绝对单位就像电影《土拨鼠之日》中的比尔·默瑞：它永远不变。换句话说，无论数字是多少，它在浏览器中的计算方式都完全相同，无论其他元素的大小如何。

你会看到的最常见的绝对值是像素值。它有点难以定义，但像素是图形显示（如电脑屏幕）的最小构建块。它基于屏幕的分辨率。因此，如果你使用超高分辨率屏幕，像素会比低分辨率屏幕上的像素小，因为分辨率可以在更小的空间内容纳更多像素，以获得更高的清晰度。但请看下面的示例。所有方块的大小都使用像素定义，因此你可以了解50px与250px相比有多大。

绝对值的好处在于它们是可预测的。但是，在某些情况下，这可能会发生变化，尤其是在缩放方面。例如，如果用户使用浏览器设置放大页面，则使用绝对值定义的任何内容都会相应地增加其绝对大小。因此，如果段落的font-size设置为20px，那么当用户放大页面时，段落会变得更大。并且由于缩放通常用于使内容更易读，因此使用保持其大小的绝对值可能是使页面更易访问的一种好方法，因为它允许用户将内容放大到更舒适的阅读位置。

但话说回来，请参阅 Josh Collinsworth 具有点击诱导性但很棒的帖子，标题为“为什么不应该在 CSS 中使用px设置font-size”，其中对像素在用于设置元素的font-size时的行为和局限性进行了详尽的解释。这是一篇非常棒的文章，可以帮助你更好地理解像素单位的行为和局限性。

此外，像素只是 CSS 中众多可用绝对长度类型中的一种。事实上，我们可以根据它们测量的对象类型对它们进行分组。

长度单位

长度单位有点有趣，因为它们在技术上可以是绝对单位或相对单位。但我们目前正在以绝对术语讨论它们，并在讨论相对长度单位时重新讨论它们。

根据我们之前看到的数字类型列表，长度本质上是一个尺寸，它是任何以单位为前缀的整数。当我们谈论尺寸时，我们实际上是在谈论元素的物理大小。

单位	名称
`cm`	厘米
`mm`	毫米
`Q`	四分之一毫米
`in`	英寸
`pc`	picas
`pt`	磅
`px`	像素

我们在这里看到的是你可能在卷尺（例如，cm和in）或印刷设计（例如，pc和pt）上看到的单位类型。它们就是它们的样子，你看到的即所得。

角度单位

角度单位纯粹是几何的。它们适合设置形状尺寸——例如圆的半径、设置linear-gradient()的方向，或设置我们想要rotate()某个对象的程度。

单位	名称	描述	示例
`deg`	度	一个完整的圆等于`360deg`。	`rotate(180deg)`
`grad`	梯度	一个完整的圆等于`400grad`。	`rotate(200grad)`
`rad`	弧度	一个完整的圆等于`2π`（即 2 × 3.14），或大约`6.2832rad`。	`rotate(3.14rad)`
`turn`	圈数	一个完整的圆是`1turn`，就像自行车车轮转动一圈。	`rotate(.5turn)`

时间单位

时间单位是你期望在钟表上找到的东西，但只测量秒和毫秒。显然，网络无法以分钟、小时、天、周、月或年来衡量。也许我们将来会新增一个“日历单位”类别，或者也许这种东西没有很好的用例。🤷‍♂️

单位	名称	描述	示例
`s`	秒	一分钟等于`60s`。	`animation-duration: 2s`
`ms`	毫秒	一秒等于`1000ms`。	`animation-duration: 2000ms`

频率单位

你不会经常看到频率单位，这是有充分理由的：在撰写本文时，它们不受任何浏览器的支持。但它们被指定用于更改声音频率，例如声音的音调。就目前情况而言，我所能理解的是，频率可以用来以赫兹和千赫兹为单位操纵音频文件，使其音调更高或更低。

单位	名称	描述	示例
`Hz`	赫兹	测量每秒的频率数	`<source src="tubthumping.mp3" type="audio/mpeg" frequency="100Hz">`
`kHz`	千赫兹	`1Hz`的值等于`0.001kHz`。	`<source src="tubthumping.mp3" type="audio/mpeg" frequency="0.1kHz">`

如果你想知道什么是“低音”什么是“高音”，规范是这样解释的：

在表示声音音调时，200Hz（或 200hz）是低音，6kHz（或 6khz）是高音。

分辨率单位

分辨率是指屏幕上包含多少个小点——比如你现在正在看的屏幕——每英寸空间内的点数越多，显示屏的清晰度和质量就越高。点数越少，显示屏就越像素化和模糊。

为什么你需要这样的东西？好吧，它非常适合在媒体查询中将样式定位到支持特定分辨率的特定屏幕。

img {
  max-width: 500px;
}

/* Double the resolution and above */
@media (min-resolution >= 2dppx) {
  img {
    max-width: 100%;
  }
}

单位	名称	描述	示例
`dpi`	每英寸点数	每英寸空间内包含的点数。	`@media (min-resolution: 96dpi) {}`
`dpcm`	每厘米点数	每厘米空间中像素点的数量。	`@media (min-resolution: 960dpcm) {}`
`dppx` (或 `x`)	每像素点	每个像素空间中像素点的数量。	`@media (min-resolution: 1dppx) {}`

有趣的是，规范中提到了一个infinite值，它受分辨率媒体查询支持，用于定位没有分辨率限制的屏幕。它与其说是一个用于定位任何类型屏幕的“万能”值，不如说是当我们使用媒体查询范围语法来评估某个值是否大于、小于或等于它时的情况。

对于分辨率没有物理限制的输出媒介（例如输出到矢量图形），此功能必须匹配 infinite 值。为了在范围上下文中评估此媒体功能， infinite 必须被视为大于任何可能的 <resolution>。（也就是说，对于无限媒体，类似于 (resolution > 1000dpi)的查询将为真。）
W3C 媒体查询级别 4 规范

相对单位

相对单位这个名称非常贴切，因为我们为相对单位使用的任何值都取决于其他事物的尺寸。假设我们有一个 HTML 元素，一个 <div>，我们为它指定了一个绝对高度值（不是相对值） 200px。

<div class="box">
  I am 200 pixels tall
</div>

.box {
  height: 200px;
}

这个高度永远不会改变。无论如何， .box 元素的高度将始终为 200px。但是，假设我们为该元素指定了一个相对宽度（不是绝对宽度） 50%。

<div class="box">
  I am 200 pixels tall and 50% wide
</div>

.box {
  height: 200px;
  width: 50%;
}

我们的盒子会发生什么？它占据了屏幕上可用空间的 50% 或一半。

看到了吗？继续在新窗口中打开该演示并更改屏幕宽度。并且请注意，高度永远不会改变，因为它是以像素为单位的绝对长度单位。同时，宽度会随着“50% 的可用空间”随着屏幕宽度的变化而流畅地调整大小。

这就是我们在谈论相对数字的计算值时所指的意思。相对数字的作用有点像乘数，它根据相对单位的类型计算用于设置长度的值。因此，值 3rem 在计算时最终会变成不同的值。

百分比（如 50%）只是相对单位的一种。我们还有很多其他的相对单位。再次强调，就像我们之前对绝对单位所做的那样，将事物分解成不同的组来理解差异非常有帮助。

百分比

我们已经相当详细地讨论了百分比。百分比之所以成为相对单位，是因为它根据另一个元素的长度计算出一个数值。因此，在一个设置为 width: 1000px 的容器中，指定了 width: 25% 的元素计算为 width: 250px。

单位	名称	相对于…
`%`	百分比	元素的父容器的尺寸。

字体相对单位

我们之前看到的 em 和 rem 单位是您随处可见的相对单位的典型例子。正如我们所见，它们非常方便，因为分别更改元素父元素或 <html> 元素的 font-size 值会导致元素自身的 font-size 值根据更新的值进行更新。

换句话说，当更新其他元素的 font-size 时，我们不需要直接更改元素的 font-size——它是相对的，并随着更改而缩放。

单位	名称	相对于…
`em`	元素	元素的父容器的 `font-size` 值。
`rem`	根元素	`<html>` 元素的 `font-size` 值。
`ch`	字符	相对于父元素字体的 `0` 字符的宽度。除了等宽字体始终保持一致的大小外，更换字体时计算出的宽度可能会更新。
`字符`	根字符	与 `ch` 单位相同，但相对于根元素（即 `<html>`）的字体。
`lh`	行高	元素的父容器的 `line-height` 值。
`rlh`	根元素行高	`<html>` 元素的 `line-height` 值。
`cap`	大写字母	相对于父元素的特定字体的资本字母的高度。
`大写字母`	根大写字母	与 `cap` 相同的度量，但相对于根元素（即 `<html>`）。
`ic`	国际字符	相对于元素父容器的CJK 字符或外文字符（例如来自中文字体）的宽度。
`国际字符`	根国际字符	与 `ic` 相同的度量，但相对于根元素（即 `<html>`）。
`ex`	x 高度	相对于父元素的特定字体的字母 `x` 的高度，或对于不包含 `x` 字符的字体的等效高度。
`x 高度`	根 x 高度	与 `ex` 相同的度量，但相对于根元素（即 `<html>`）。

其中一些术语对排版极客来说比其他人更有意义。下图突出显示了对应于相对字体单位的行。

Four lines drawn over a line of text illustrating the ascender height, x-height, baseline, and descender height.

因此，以牺牲将这个概念灌输到脑子里为代价，如果 width: 10ch 在使用一种字体时计算为一定数量的像素，那么如果用另一种字符更大或更小的字体替换该字体，则计算出的值可能会发生变化。

视口相对单位

单位	名称	相对于…
`vh` / `vw`	视口高度 / 视口宽度	分别为视口（即屏幕可见部分）的高度和宽度。
`vmin` / `vmax`	视口最小值 / 视口最大值	分别为 `vh` 和 `vw` 中较小和较大的值。
`lvh` / `lvw`	大视口高度 / 大视口宽度	当设备的虚拟键盘或浏览器 UI 消失时，视口的高度和宽度，从而留下更大的可用空间。
`lvb` / `lvi`	大视口块 / 大视口内联	这些是 `lvh` 和 `lvw` 的逻辑等效项，指示块和内联方向。
`svh` / `svw`	小视口高度 / 小视口宽度	当设备的虚拟键盘或浏览器 UI 可见时，视口的高度和宽度，使可用空间变小。
`svb` / `svi`	小视口块 / 小视口内联	这些是 `svh` 和 `svw` 的逻辑等效项，指示块和内联方向。
`dvh` / `dvw`	动态视口高度 / 动态视口宽度	视口的高度和宽度会根据可用空间的变化而变化，例如，当设备的虚拟键盘或浏览器 UI 处于可见状态时。
`dvb` / `dvi`	动态视口块 / 动态视口内联	它们是`dvh`和`dvw`的逻辑等价物，分别指示块和内联方向。
`dvmin` / `dvmax`	动态视口最小值 / 动态视口最大值	分别表示`dvh`/`dvb`和`dvw`/`dvi`中较小和较大的值。

啊，视口单位！当我们说某个元素应该有 100% 的宽度时，这意味着它占据了其所在容器的全部宽度。这是因为百分比单位始终相对于其最近的父元素。但是，**视口单位**始终相对于视口或浏览器窗口的大小。如果一个元素的**视口高度**为100vh，**视口宽度**为100vw，则它将与整个浏览器窗口一样高和宽。

Illustration of a browser window with intersecting arrows pointing towards the vertical and horizontal extremes of the dimensions.

这可以是一种创建网站顶部英雄横幅之类元素的巧妙方法。例如，我们可以创建一个始终占据视口高度一半 (50vh) 的横幅，使其无论用户浏览器高度如何都保持突出显示。在以下演示的左上角更改 CSS 中的代码，将height: 50vh更改为其他值，例如75vh，以查看横幅高度是如何响应的。

在使用视口单位时，还有一件非常重要的事情需要了解。您知道像 iPhone 或 Android 设备这样的手机都有虚拟键盘，您可以在屏幕上直接输入吗？**该键盘会改变视口的大小。**这意味着，每当键盘打开时，100vh不再是屏幕的完整高度，而是 *键盘打开时剩余的空间*，并且布局可能会因此而变得非常挤压。

这就是为什么除了vh之外，我们还有svh、lvh和dvh单位。

svh 等于“小”视口高度，即键盘打开时的视口高度。
lvh 等于“大”视口高度，即键盘禁用且不可见时的视口高度。
dvh 是svh和lvh之间的折衷方案，因为它具有“动态”性，并在显示或不显示键盘时相应地更新其值。
dvmin / dvmax 分别表示dvh中较大和较小的值。

在某些情况下，这有点像是在走钢丝，这也是容器查询及其单位（我们将在下一节中介绍）越来越受欢迎的原因。查看 Ahmed Shader 的文章“新的视口单位”，以全面了解视口单位，并详细了解您可能遇到的问题。您可能还会对 Sime Vidas 的“新的 CSS 视口单位无法解决经典滚动条问题”感兴趣，以便更好地理解视口单位如何计算值。

容器相对单位

单位	名称	相当于…
`cqw`	容器查询宽度	查询容器宽度的 1%。
`cqh`	容器查询高度	查询容器高度的 1%。
`cqi`	容器查询内联尺寸	查询容器内联尺寸的 1%，在水平书写模式下为宽度。
`cqb`	容器查询块尺寸	查询容器块尺寸的 1%，在水平书写模式下为高度。
`cqmin`	容器查询最小尺寸	`cqi` 或 `cqb` 中较小的值。
`cqmax`	容器查询最大尺寸	`cqi` 或 `cqb` 中较大的值。

容器单位旨在与容器查询一起使用。就像我们可以使用媒体查询来定位特定的屏幕尺寸一样，我们也可以定位特定元素的特定尺寸，并使用容器查询应用样式。

我们这里不会深入探讨容器查询。相关的一点是，我们有相对于容器大小的 CSS 长度单位。例如，如果我们要定义一个容器

.parent-container {
  container-type: inline-size;
}

…那么我们正在观察该元素的inline-size（在水平书写模式下等效于width），并且可以在它达到特定尺寸时将样式应用于其他元素。

.child-element {
  background: rebeccapurple;
  width: 100%;

  @container parent (width > 30ch) {
    .child-element {
      background: dodgeblue;
      width: 50cqi;
    }
  }
}

尝试调整以下演示的大小。当父容器大于30ch时，子元素将更改背景并缩小到父容器宽度的一半，即50cqi。

无单位数字怎么样？

哦，是的，有时您会在 CSS 中看到没有单位的数字——只是一个整数或数字，没有任何附加内容。

aspect-ratio: 2 / 1; /* Ratio */
column-count: 3; /* Specifies a number of columns */
flex-grow: 1; /* Allows the element to stretch in a flex layout */
grid-column-start: 4; /* Places the element on a specific grid line */
order: 2; /* Sets the order of elemnents in a flex or grid layout */
scale: 2; /* The elementis scaled up or down by a factor */
z-index: 100; /* Element is placed in a numbered layer for stacking */
zoom: 0.2;  /* The element zooms in or out by a factor */

这不是所有接受无单位数字值的 CSS 属性的完整列表，但它清楚地说明了何时使用它们。您会发现，在大多数情况下，无单位数字是一个明确的细节，例如用于定位元素的特定列、堆叠上下文中的特定层、启用或禁用功能的布尔值或元素的顺序。但请注意，无论我们使用什么单位，零始终评估为零，因此我们可以在声明“零”时使用或不使用前缀单位。

border: 0; /* No border */
box-shadow: 0 0 5px #333; /* No shadow offset */
margin: 0; /* No margin */
padding: 0; /* No padding */

我们可以创建自己的自定义单位！

在某些情况下，我们可能希望使用数字值，但 CSS 并不完全将其识别为数字值。在这些情况下，无论数字是否包含字母字符，它都将被识别为“字符串”值。这就是我们可以使用@property创建所谓的“自定义属性”以特定方式评估数值的地方。

这是一个很好的例子。曾经有一段时间，动画渐变随时间推移更改颜色几乎是不可能的，因为这样做需要 (1) 一个允许我们更改颜色值的色相的颜色函数（我们使用hsl()有这样的函数）和 (2) 能够在色谱范围内插值该色相值，介于0deg和360deg之间。

听起来很简单，对吧？定义一个从0开始的变量，然后在动画结束时循环到360度。但这不起作用

/* 👎 */
.element {
  --hue: 0;
  
  animation: rainbow 10s linear infinite;
  background: linear-gradient(hsl(--hue 50% 50%);
}

@keyframes rainbow {
  from { --hue: 0; }
  to { --hue: 360deg; }
}

这是因为 CSS 将变量读取为字符串而不是数字。我们必须将该变量注册为**自定义属性**，以便 CSS 能将其适当地读取为数值。

@property --hue {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

就是这样！现在我们已经向 CSS 提示了--hue语法是<number>，我们可以开始动画了！

/* 👍 */
@property --hue {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

.element {
  --hue: 0;
  
  animation: rainbow 10s linear infinite;
  background: linear-gradient(hsl(--hue 50% 50%);
}

@keyframes rainbow {
  from { --huw: 0; }
  to { --hue: 360deg; }
}

在 Geoff Graham 的“插值数值 CSS 变量”中可以找到此相同示例的更深入解释。

何时使用一种单位而不是另一种单位

这非常棘手，因为 CSS 非常灵活，并且没有关于何时使用特定类型的 CSS 长度单位而不是另一种单位的明确或硬性规定。在某些情况下，你绝对必须使用特定的单位，因为某些 CSS 特性的规范就是这样规定的，例如使用角度单位来设置线性渐变的方向。

.element {
  background: linear-gradient(
    135deg, red, blue;
  )
}

同样，对于我们在某些颜色函数中使用的值也是如此，例如使用百分比来设置 hsl() 函数中的饱和度和亮度级别。

.element {
  background: hsl(0 100% 10%);
}

说到颜色函数，我们使用整数或数字来定义 Alpha 透明度。

.element {
  background: hsl(0 100% 10% / 0.5); /* or simply .5 */
}

尽管如此，许多情况都将是某种程度上的“视情况而定”，但有些情况下使用特定的单位是有意义的。

通常使用 `rem` 和 `em` 单位设置字体大小

这样，你可以设置一个系统，其中更改 <html> 或父元素的 font-size 值会更新其子元素的字体大小。

html {
  font-size: 18px; /* Inherited by all other elements */
}

.parent {
  font-size: 1rem; /* Updates when the `html` size changes */
}

.child {
  font-size: 1em; /* Updates when the parent size changes */
}

如果需要，声明“零”时不带单位

这没什么大不了的，但省略单位可以稍微缩短代码，并且只要我们能够编写更短的代码，就有机会提高页面性能。影响可能是微不足道的，但我们可以这样做，因为无论我们使用什么单位，0 始终计算为 0。

尽可能使用容器单位进行响应式设计

总的来说，容器查询对于响应式布局非常棒，因为它们查看容器的大小，并在容器达到特定大小时让我们将其样式应用于其子元素。

.parent {
  container: my-container / inline-size; /* Looks at width */
}

.child {
  display: flex;
  flex-direction: column;
  max-width: 100vh; /* 100% of the viewport */
}

/* When the container is greater than 600px wide */
@container my-container (width >= 600px) {
  .child {
    flex-direction: row;
    max-width: 50%; /* 50% of the parent elenent */
  }
}

因此，如果我们要调整 .child 元素（或其任何子元素）的大小，最好使用容器单位相对于容器的大小指定大小，而不是使用视口单位相对于视口的大小。

.parent {
  container: my-container / inline-size; /* Looks at width */
}

.child {
  display: flex;
  flex-direction: column;
  max-width: 100cqi; /* 100% of the container */
}

/* When the container is greater than 600px wide */
@container my-container (width >= 600px) {
  .child {
    flex-direction: row;
    max-width: 50cqi; /* 50% of the container */
  }
}

不确定上下文时使用百分比

是的，使用容器单位进行响应式设计，但这只有在你了解自己处于容器上下文中时才有用。但是，你可能在不同的地方使用相同的组件，其中一个地方可能不是注册的容器。

在这种情况下，使用百分比值，因为百分比相对于你所在的任何父元素，而不管它是否是容器。这样，你可以声明元素的大小为 100% 以占据包含它的任何父元素的全部空间。

唯一的注意事项是，我们仅根据父元素确定大小。同时，容器单位可以为容器中的任何子元素设置样式，无论它位于何处。

视口单位非常适合布局容器

你可能认为视口单位是不好的，因为我们在很多情况下都建议避免使用它们，例如字体大小，但它们仍然非常有用，尤其是在建立全页面布局时。

我说“全页面”布局是因为容器查询是根据元素在其容器中所占空间来调整大小的黄金标准。但是，如果我们使用的是一整页的容器，那么就可以使用视口单位在更高层级建立响应式布局。

如果各个容器的元素查看其容器以获取大小信息，那么各个容器本身的大小和位置可能应该查看视口，因为它直接影响页面上的空间量。

示例

元素 (em) 和相对元素 (rem) 单位

让我们具体谈谈这两个小家伙。我们看到了百分比单位如何根据其他事物的大小来计算其大小。em 和 rem 单位有点类似，但它们是根据特定元素的相对字体大小计算的。

让我们从 em 单位开始，假设我们有一个 HTML 元素，一个带有 .box 类的 <div>，并且我们将它的字体大小设置为 20px。这意味着该元素内的任何文本都是 20px。

很好，现在如果我们决定需要在框中添加额外的文本，并赋予它一个相对的字体大小1.5em会怎样？

看到字体大小为1.5em比20px文本更大了吗？这是因为**较大的文本是基于框的字体大小**。在幕后，这是浏览器正在计算的内容

20px * 1.5 = 30px

因此，相对字体大小乘以像素字体大小，最终得到30px。

而且你猜怎么着？rem单位做的事情完全一样。但它不是乘以父容器的像素字体大小，而是查看实际<html>元素的像素字体大小。默认情况下，它是16px。

/* This is the browser's default font size */
html {
  font-size: 16px;
}

.box {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
}

如果我们更改 HTML 元素的字体大小为其他值会怎样？

html {
  font-size: 18px;
}

.box {
  font-size: 1.5rem; /* 18px * 1.5 = 27px */
}

字符单位 (ch)

字符单位 (ch)是另一个相对于字体大小的单位，虽然它并不经常使用，但它在根据元素中显示的内容量来调整大小方面非常棒，因为一个字符单位等于一个字符内容的宽度。以下是我如何理解它的。如果我们在 HTML 中有以下内容

<p>The big brown dog lazily jumped over the fence.</p>

…以及以下 CSS

p {
  width: 10ch;
}

我们将得到一个宽 10 个字符的段落。这意味着文本将在第 10 个字符后换行，包括空格。

但请注意，单词本身不会换行。如果内容应该在 10 个字符后换行，浏览器将在完整单词后开始下一行，而不是将单词分成多行，从而保持一切易于阅读。

如果您想知道何时可能会用到ch单位，它绝对是用于建立更舒适易读的行长的最佳选择，尤其是在像您正在阅读的本指南这样的长篇内容中。

行高单位 (lh)

行高单位 (lh)查看元素的包含（即父）元素的line-height属性值，并使用该值来调整大小。

.parent {
  line-height: 1.5;
}

.child {
  height: 3lh; /* 3 * 1.5 = 4.5 */
}

什么时候会用到它？就我个人而言，我发现lh对于根据文本所需的行数设置某个元素的精确高度很有用。您可以在Temani Afif 的“CSS Ribbon”效果中清楚地看到这一点，它使用lh来确定构成每行文本的尺寸，从而形成大小一致的行，并适应父元素的font-size值。

绝对单位与相对单位

文章发布于 2020年1月18日

概述

快速参考

目录

简介

数字类型

绝对单位

相对单位

无单位数字怎么样？

我们可以创建自己的自定义单位！

何时使用一种单位而不是另一种单位

通常使用 rem 和 em 单位设置字体大小

如果需要，声明“零”时不带单位

尽可能使用容器单位进行响应式设计

不确定上下文时使用百分比

视口单位非常适合布局容器

示例

相关文章

评论

发表评论 取消回复

通常使用 `rem` 和 `em` 单位设置字体大小

发表评论取消回复