数字、长度和百分比

你可能会发现自己在 CSS 中使用了各种数值数据类型。以下全部归类为数值：

长度

css中最常见的数字就是 长度，例如 10px（像素）或 30em。CSS 中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。

绝对长度单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm（厘米）。惟一一个你经常使用的值，估计就是 px（像素）。

相对长度单位

相对长度单位是相对于其他某些东西的。例如：

• em 和 rem 分别相对于父元素和根元素的字体大小。
• vh 和 vw分别相对于视口的高度和宽度。

使用相对单位的好处是，通过一些精心的规划，你可以使文本或其他元素的大小相对于页面上的任何指定的东西进行缩放。

示例：

.wrapper {
  font-size: 1em;
}

.px {
  width: 200px;
}

.vw {
  width: 10vw;
}

.em {
  width: 10em;
}

百分比

在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

在下面的示例中，两个百分比大小的框和两个像素大小的框具有相同的类名。分别为 200px 和 40% 宽。

不同之处在于，第二组两个框位于一个 400px 宽的包装器中。第二个 200px 宽的盒子和第一个一样宽，但是第二个 40% 的盒子现在是 400px 的 40%——比第一个窄多了！

.wrapper {
  width: 400px;
  border: 5px solid rebeccapurple;
}

.px {
  width: 200px;
}

.percent {
  width: 40%;
}

<div class="box px">I am 200px wide</div>
<div class="box percent">I am 40% wide</div>
<div class="wrapper">
  <div class="box px">I am 200px wide</div>
  <div class="box percent">I am 40% wide</div>
</div>

颜色

一般颜色

.one {
  background-color: antiquewhite;
}

.two {
  background-color: blueviolet;
}

.three {
  background-color: greenyellow;
}

十六进制 RGB 值

.one {
  background-color: #02798b;
}

.two {
  background-color: #c55da1;
}

.three {
  background-color: #128a7d;
}

RGB

RGB 值是一个函数——rgb()——它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB 的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于 0 到 255 之间的十进制数字表示的

.one {
  background-color: rgb(2 121 139);
}

.two {
  background-color: rgb(197 93 161);
}

.three {
  background-color: rgb(18 138 125);
}

RGBA

你可以向 rgb() 传递第四个参数，它代表颜色的 alpha 通道，控制不透明度。如果你把这个值设置为 0，它将使颜色完全透明，而 1 将使它完全不透明。介于两者之间的值会给你带来不同级别的透明度。

.one {
  background-color: rgb(2 121 139 / .3);
}

.two {
  background-color: rgb(197 93 161 / .7);
}

.three {
  background-color: rgb(18 138 125 / .9);
}

图片

.image {
  background-image: url(star.png);
}

.gradient {
  background-image: linear-gradient(90deg, rgb(1 0 255 / 39%), rgb(0 212 255 / 100%));
}