嘿，小朋友。
我是
Fish^12。想学CSS吗？这是我CSS系列的第四篇文章。在阅读这篇指南之前，请确保你已经掌握了前面的内容
这次，我们要讨论的是单位。我保证会很有趣。相信我。
前言：本指南面向新手。如果你了解各式CSS单位及其各自适用场景，可以给这篇指南投个down。
量量我的
在颜色之外，你还需要处理大量的定位、长度和其它数学问题。如果你想制作一个不局限于简单换色的版式，这是必经之路。让我们从基础开始。
.pixelMeasurements {
border: 10px solid pink;
width: fit-content;
}
这是一个带有10px（即pixel，像素）粉色实线边框的文本框。
px是唯一的绝对单位。请注意，这个单位实际上并不完全等价于现实世界的像素。一台高分辨率的电脑可能会用多个像素来呈现一个px。它更多是基于视觉感知进行定义的。
尽管像素单位随处可见，但你应该尽量避免使用它们。推荐使用更加灵活的单位。举例而言，看看以下这段CSS代码。
.badBoyBox {
width: 600px;
background-color: chartreuse;
}
我有好长一根！
如果你在电脑上查看，这个div不会有什么问题。但如果你使用的设备宽度小于600px，那这个div就会超出你屏幕的尺寸。
反之，如果你有一个非常小的div，比如100px，那在移动端可以正常显示，但在更大的显示器上会小成一团，这也不对。
归根结底，像素单位在无障碍性方面不太理想。你应当让你的格式能适应你用户的需求，而不是反过来。我通常只在做一些小设置时使用像素单位，例如为了提升可读性给span的左右内边距添加几个像素。
无边距 vs. 有边距
小调整，大作用。
相对单位
有很多相对单位需要讨论，它们各自有着不同的应用场景。让我们从em和rem开始。
.emBoss {
font-size: 2em;
}
我是大号文字！
em是一种相对单位，等于元素或其父元素的字体大小。在这一示例中，这一单位等于body字体大小15.2px的两倍。
这种单位适合根据字体大小基于比例创建格式。嵌套使用em会产生叠加效果。例如，如果父元素使用2em，子元素也使用2em，那么最终的字体大小会是4em；如果父元素使用0.9em，子元素也使用0.9em，那么最终的字体大小会是0.81em。
因此，em很适用于上标、下标、列表或其它依赖于正宗字体大小tm的场景。
总的来说，rem能够确保全文上下的一致性。它不依赖于父元素的尺寸，而是基于root的字体大小；通常情况下，也就是html元素的字体大小。无论是在#page-content、.owindow还是h1元素中，1 rem的大小始终相同。
.percentGrowth {
width: 80%;
}
我只达到80%。
百分比单位基于父元素的尺寸。在这一示例中，这个div的宽度占据了#page-content元素的80%。百分比适用于对内容进行缩放，接下来这组单位也是如此。
.percentGrowth {
width: 20vw;
}
我怪怪的。
vw和vh分别代表视口宽度和视口高度。它们的大小基于用户屏幕的尺寸，100vw会跟整个屏幕一样宽，而100vh会跟整个屏幕一样高。
这些单位将是你最常见到的计量方式，也将会是你CSS工具包的一个核心部分。虽然其它场景下还有许多其它单位，但这些就是你会最常用到的。
进阶功能
既然你已经知道了主要单位是什么，现在该让它们发挥作用了。
.maxVerstappen {
font-size: max(3rem, 1vw);
}
看看我有多大……
max()允许你设置多个值，最后它会使用最大的值。在这一示例中，字体大小将是3rem，除非1vw比它更大。
.maxVerstappen {
font-size: min(20px, 10vw);
}
看看我有多小……
min()允许你设置多个值，最后它会使用最小的值。在这一示例中，字体大小将是20px，除非1vw比它更小。
.percentGrowth {
font-size: clamp(1.5rem, 10vw, 3rem);
}
哇袄哇袄哇。
clamp是一个CSS函数，它允许你输入一个下界和一个上界，以及一个介于二者之间的首选值。
这允许你创建一个根据视口尺寸伸缩的元素。在上面的例子中，字体大小的最大值可以是3rem，最小则是1.5rem，如果10vw介于1.5和3rem之间，字体大小将在这一范围内平滑变动。
clamp最好配合Clamp计算器一起使用。
.percentGrowth {
width: calc(100% - 30px);
background-color: yellow;
}
真棒。
calc()是另一个CSS函数，它有一些非常有趣的应用。例如，在正常情况下，你其实不能组合不同类型的单位。100px + 100%通常不会生效。但calc()帮你打破了这一限制。注意：不要漏掉这里的空格。如果空格输入不当，会产生错误。
在calc()之外，还有许多复现一些算术和几何过程的CSS函数。
- 支持角度和圆计算的
cos()、sin()、tan()以及其它所有三角函数。 - 支持指数和开方计算的
exp()和sqrt()。
你很可能用不到这些函数，但对于一些高度特定的需求，它们也可能成为非常强大的工具。例如，如果你要在一个圆内画出一条斜线，这就是你的最佳选择。
来口劲大的
让我们把这些知识用起来。
假设我们想做一个诡异的形状。很简单。
.weirdShape {
clip-path: polygon(0% 100%, 15% 100%, 15% 15%, 85% 15%, 85% 60%, 100% 60%, 100% 0%, 0% 0%);
background-color: red;
width: 100px;
height: 100px;
}
我很喜欢路径裁剪；如果你想玩玩，可以使用这个网站。它的基本功能是从元素中裁出形状。以上形状在构成一个正方形时粗细刚刚好。
然而，假设我想让它拉伸铺满屏幕，把它的宽度设置为100%，就会发生这种情况。
.weirdShape {
clip-path: polygon(0% 100%, 15% 100%, 15% 15%, 85% 15%, 85% 60%, 100% 60%, 100% 0%, 0% 0%);
background-color: red;
width: 100%;
height: 100px;
}
呃啊！我希望这个形状的粗细能保持一致。那么，解决方案就是将百分比单位转换为经计算的数值。我们把15%改为15px，把85%改为calc(100% - 15px)。
.weirdShape {
clip-path: polygon(0% 100%, 15px 100%, 15px 15px, calc(100% - 15px) 15px, calc(100% - 15px) 60%, 100% 60%, 100% 0%, 0% 0%);
background-color: red;
width: 100%;
height: 100px;
}
搞定了！现在这个形状可以在适应任何屏幕尺寸的同时维持15px的宽度。事实上，在设计theme:shoebill时，我在.image-block和#footer中就使用了这个小技巧。
总结
现在你了解了单位的力量。希望我有成功让它变得像我承诺中那样有趣。这是一样让我狂热痴迷的东西。