CSS 单位

如今，CSS 中有如此多的单元，很难跟踪，但它们对于布局网页至关重要。近年来，还有一些新的单元获得了很多浏览器的支持，使得使用 CSS 更容易创建，这是许多人不知道的。

让我们看一下 CSS 的单元以及如何使用它们。

像素Pixels#

using 声明px，这是最基本的单位。任何接受页面上的数字或距离的 CSS 属性通常都接受像素。然而，它并不总是最好的选择。这是一个例子：

div {
    width: 10px;
}

百分比Percent#

另一个常见的单位是%，它指的是元素中具有 或 高度的部分，具体取决于您要进入的方向。请注意，高度并不总是按预期工作，即height: 50%;在正文元素上不会产生 50% 高度的页面，除非明确定义了高度。

div {
    width: 50%;
}

em/rem#

1em指当前元素的字体大小，而1rem指的是文档底部的字体大小。因此，如果 body 标签的字体大小为 16px，则1rem表示 16px。

使用两者都有其用途。使用emlet’s 让我们只需更改其字体大小即可轻松使对象变大，并且其他所有内容都应适当缩放。这些不仅仅指字体大小，它们可以用于任何属性，即宽度：

div {
    width: 5rem;
}

这些属性已经比仅使用像素好得多，因为现在您可以使用 just 缩放整个文档font-size，这使得可访问性变得轻而易举。这也意味着，如果屏幕阅读器覆盖默认的根字体大小，您的页面将自动调整。

ch/ex#

这些

传统单位#

我们还可以在网页上使用更传统的单位，例如厘米。请注意，我不建议将这些用于网页设计，而是可能用于打印或非网页设计相关的 CSS。那是因为浏览器和设备根据自己对像素密度的定义来确定这些的定义，这使得事情变得非常复杂。

单元	定义
cm	厘米
mm	毫米
Q	四分之一毫米
in	英寸，通常为 96 像素
pt	点，或 1/72 英寸
pc	派卡，或 1/6 英寸
in	英寸

在代码中：

div {
    width: 1.5cm;
}

视口宽度/高度测量#

也许是最有用的单位之一，也是最近添加到 CSS 中的vh，vw分别指的是视口宽度和高度的 1%。因此，值100vw将指当前视口的整个宽度。

下面的 div 是当前视口的全宽和全高：

div {
    width: 100vw;
    height: 100vh;
}

vmin/vmax最小/最大

vmin并vmax参考视口宽度或高度的最小值或最大值。所以如果视口宽度较大，那么100vmax将指的是视口的全宽。这显然取决于调整大小的窗口。

计算#

在 CSS 中，通常需要组合不同的度量单位。我发现自己经常使用的一个是 100% 的宽度减去 1rem。这可以通过 来实现calc()，它接受减法、加法、除法或乘法。下面举几个例子：

div {
    width: calc(100% - 5rem);
    height: calc(100vh / 2);
}
p {
    width: calc(10rem * 5);
    height: calc(5rem / 5);
}

请注意，在某些浏览器中，间距很重要。因此，请确保运算符和数字之间有空格，即100% - 5rem，不是 100%-5rem。