这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
主要是针对CSS进行了复习，最近都在做其他的事情，就没有怎么学习，最近快忙完了，准备开始前端学习！
2.2.7 CSS值和单位
什么是 CSS 的值？
在 CSS 规范和 MDN 的属性页上，你将能够发现值的存在，因为它们将被尖括号包围，如<color>或<length>。当你看到值<color>对特定属性有效时，这意味着你可以使用任何有效的颜色作为该属性的值，如 <color>参考页面所列。
数字，长度和百分比
你可能会发现自己在 CSS 中使用了各种数值数据类型。以下全部归类为数值：
| 数值类型 | 描述 |
|---|---|
| 是一个整数，比如 1024 或 -55。 | |
| 表示一个小数——它可能有小数点后面的部分，也可能没有，例如 0.255、128 或 -1.2。 | |
| 是一个，它有一个附加的单位，例如 45deg、5s 或 10px。是一个伞形类别，包括、、 | |
| 表示一些其他值的一部分，例如 50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。 |
长度
最常见的数字类型是<length>，例如 10px(像素) 或 30em。CSS 中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。
绝对长度单位
以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。
| 单位 | 名称 | 等价换算 |
|---|---|---|
| cm | 厘米 | 1cm = 96px/2.54 |
| mm | 毫米 | 1mm = 1/10th of 1cm |
| Q | 四分之一毫米 | 1Q = 1/40th of 1cm |
| in | 英寸 | 1in = 2.54cm = 96px |
| pc | 十二点活字 | 1pc = 1/6th of 1in |
| pt | 点 | 1pt = 1/72th of 1in |
| px | 像素 | 1px = 1/96th of 1in |
这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm。惟一一个你经常使用的值，估计就是 px(像素)。 ##### 相对长度单位
相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，你可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。
| 单位 | 相对于 |
|---|---|
| em | 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width |
| ex | 字符“x”的高度 |
| ch | 数字“0”的宽度 |
| rem | 根元素的字体大小 |
| lh | 元素的 line-height |
| vw | 视窗宽度的 1% |
| vh | 视窗高度的 1% |
| vmin | 视窗较小尺寸的 1% |
| vmax | 视图大尺寸的 1% |
ems and rems
em和rem是你在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当你开始学习更复杂的主题时，比如样式化文本或 CSS 布局。下面的示例提供了一个演示。
HTML 是一组嵌套的列表—我们总共有三个列表，并且两个示例都有相同的 HTML。唯一的区别是第一个类具有 ems，第二个类具有 rems。
首先，我们将 16px 设置为<html>元素的字体大小。
概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。带有 ems 类的<ul>内的<li>元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为 1.3em—是其父嵌套字体大小的 1.3 倍。
概括地说，rem 单位的意思是“根元素的字体大小”。(“根 em”的 rem 标准。)<ul>内的<li>元素和一个 rems 类从根元素 (<html>)中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。
但是，如果你在 CSS 中更改字体大小，你将看到所有其他相关内容都发生了更改，包括 rem 和 em 大小的文本。
百分比
在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。
在下面的示例中，两个百分比大小的框和两个像素大小的框具有相同的类名。分别为 200px 和 40% 宽。
不同之处在于，第二组两个框位于一个 400 像素宽的包装器中。第二个 200px 宽的盒子和第一个一样宽，但是第二个 40% 的盒子现在是 400px 的 40%——比第一个窄多了！
数字
有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity ），它控制元素的不透明度 (它的透明程度)。此属性接受 0(完全透明) 和 1(完全不透明) 之间的数字。
备注： 当你在 CSS 中使用数字作为值时，它不应该用引号括起来。
