7 个你可能不知道的 CSS 单元

学习 css：完整指南

我们构建了一个完整的指南来帮助您学习 CSS，无论您是刚刚开始学习基础知识还是想要探索更高级的 CSS。

新的 CSS 技术

使用我们熟悉的 CSS 技术很容易陷入困境，但是当新问题出现时，这样做会使我们处于不利地位。

随着网络的不断发展，对新解决方案的需求也将继续增长。因此，作为网页设计师和前端开发人员，我们别无选择，只能了解我们的工具集，并且非常了解它。

这意味着即使是专业工具也要了解——那些不经常使用但在需要时使用的工具正是工作的正确工具。

今天，我将向您介绍一些您以前可能不知道的 CSS 工具。这些工具都是测量单位，如像素或 em，但您很可能从未听说过它们！

rem

我们将从与您可能已经熟悉的东西相似的东西开始。em单位定义为font-size电流。因此，例如，如果您在 body 元素上设置字体大小，则 bodyem中任何子元素的值都将等于该字体大小。

<body>
<div class="test">Test</div>
</body>

body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

在这里，我们已经说过 div 将有一个font-sizeof 1.2em。这是它继承的字体大小的 1.2 倍，在本例中为 14px。结果是16.8px。

但是，当您将 em 定义的字体大小相互层叠时会发生什么？在下面的代码片段中，我们应用了与上面完全相同的 CSS。每个 div 都从其父级继承其字体大小，从而为我们提供逐渐增加的字体大小。

<body>
    <div>
        Test 
        <div>
            Test 
            <div>
                Test 
            </div>
        </div>
    </div>
</body>

See the Pen Cascading em Values by Envato Tuts+ (@tutsplus) on CodePen.

虽然在某些情况下可能需要这样做，但您通常可能只想简单地依赖单个指标来进行扩展。在这种情况下，您应该使用rem. 中的“r”rem代表“根”；这等于在根元素处设置的字体大小；在大多数情况下，这是html元素。

html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}

在前面示例中的所有三个嵌套 div 中，字体的计算结果为16.8px.

Good for Grids

Rems 不仅对字体大小有用。例如，您可以使用将整个网格系统或 UI 样式库基于根 HTML 字体大小，并在特定位置rem使用缩放。em这将为您提供更可预测的字体大小和缩放。

.container {
width: 70rem; // 70 * 14px = 980px
}

从概念上讲，像这样的策略背后的想法是允许您的界面随内容的大小而扩展。但是，它不一定对每种情况都最有意义。

vh 和 vw

响应式网页设计技术严重依赖百分比规则。然而，CSS 百分比并不总是解决所有问题的最佳解决方案。CSS 宽度是相对于最近的包含父元素的。如果您想使用视口的宽度或高度而不是父元素的宽度怎么办？这正是vhandvw单位所提供的。

vh 元素等于视口高度的 1/100 。例如，如果浏览器的高度为 900px，则1vh计算结果为 9px。同样，如果视口宽度为750px，则1vw计算结果为7.5px。

这些规则似乎有无穷无尽的用途。例如，一个非常简单的全高或接近全高幻灯片的方法可以通过一行 CSS 实现：

.slide {
height: 100vh;
}

想象一下，您想要一个设置为填充屏幕宽度的标题。为此，您将在vw. 该大小将随浏览器的宽度缩放。

See the Pen Demo of vw Unit by Envato Tuts+ (@tutsplus) on CodePen.

vmin 和 vmax

虽然vh和vm总是分别与视口高度和宽度相关，vmin 并且与这些宽度和高度的最大值或最小值相关，具体取决于哪个更小和更大。例如，如果浏览器设置为 1100 像素宽和 700 像素高，则为 7 像素和11 像素。但是，如果宽度设置为 800 像素，高度设置为 1080 像素，则将等于 8 像素，而将设置为.vmax1vmin1vmaxvminvmax10.8px

那么，什么时候可以使用这些值呢？

想象一下，您需要一个始终在屏幕上可见的元素。使用设置为 vmin低于 100 的值的高度和宽度将启用此功能。例如，一个总是至少接触屏幕两侧的方形元素可以这样定义：

.box {
height: 100vmin;
width: 100vmin;
}

如果您需要一个始终覆盖可见视口的方形框（始终触摸屏幕的所有四个边），请使用相同的规则，除了vmax.

.box {
height: 100vmax;
width: 100vmax;
}

这些规则的组合提供了一种非常灵活的方式来以新的和令人高兴的方式利用视口的大小。

ex and ch

与和类似，单位ex和依赖于当前字体和字体大小。但是，与和不同的是，这些单位也依赖于，因为它们是根据特定于字体的度量来确定的。chemrememremfont-family

ch单位或字符单位被定义为零字符宽度的“高级度量” ，0. 关于这意味着什么的一些非常有趣的讨论可以在 Eric Meyers 的博客上找到，但基本概念是，给定等宽字体，一个具有 N字符单位宽度的框，例如width: 40ch;，总是可以包含一个包含 40 个字符的字符串特定的字体。虽然这个特定规则的传统用法与布置盲文有关，但这里的创造力的可能性肯定超出了这些简单的应用程序。

单位定义为“当前字体的exx 高度或一的二分之一em”。给定字体的是该x-height字体的小写 x 的高度。通常，这大约在字体的中间标记处。