CSS单位的使用实例教程

学习如何在CSS中使用单位

在CSS中，你每天都会用到的东西之一就是单位。它们被用来设置长度、间隔、边距、对齐元素等等。

像px 、em 、rem ，或百分比。

它们无处不在。也有一些相对陌生的单位。

像素

最广泛使用的测量单位。像素实际上并不与你的屏幕上的物理像素相关，因为它因设备而有很大的不同（想想高DPI设备与非视网膜设备）。

有一个惯例，使这个单位在不同的设备上工作一致。

百分比

另一个非常有用的衡量标准，百分比让你以该父元素对应属性的百分比来指定数值。

例子。

.parent {
  width: 400px;
}

.child {
  width: 50%; /* = 200px */
}

现实世界的测量单位

我们有那些从外部世界翻译过来的测量单位。它们在屏幕上大多是无用的，但对打印样式表却很有用。它们是

• cm 一厘米（映射为37.8像素）
• mm 一毫米（0.1厘米）
• q 四分之一毫米(a quarter of a millimeter)
• in 一英寸（映射为96像素）
• pt 一个点（1英寸=72点）
• pc 一皮卡（1皮卡=12点）

相对单位

• em 是分配给该元素的数值 ，因此它的确切数值在不同的元素之间变化。它不因使用的字体而变化，只是因字体大小而变化。在排版学中，它衡量的是 字母的宽度。font-size m
• rem 与 相似，但它不是根据当前元素的字体大小变化，而是使用根元素( )的字体大小。你只需设置一次字体大小， ，就能在整个页面上保持一致的测量。em``html rem
• ex 和 一样，但它不是测量 的宽度，而是测量 字母的高度。它可以根据使用的字体和字体大小而改变。em m x
• ch 像 ，但不是测量 的高度，而是测量 的宽度（零）。ex x 0

视口单位

• vw 视口宽度单位代表视口宽度的一个百分比。 表示视口宽度的50%。50vw
• vh 视口高度单位代表视口高度的百分比。 表示视口高度的50%。50vh
• vmin 视口最小单位代表高度或宽度的百分比的最小值。 是当前宽度或高度的30%，取决于哪一个更小。30vmin
• vmax 视口最大单位代表高度或宽度之间的最大百分比。 是当前宽度或高度的30%，取决于哪一个更大。30vmax

分数单位

fr 是分数单位，它们在CSS Grid中被用来将空间划分为若干分数。