CSS 的值与单位

继承

有些 css 属性会被子元素继承（color），有些则不会（width）

控制继承

通过 继承通用属性 值来控制继承，每个属性都可以接收这些值：

1. inherit：继承父元素的属性值
2. initial：设置为初始值，比如 color 的初始值是黑色
3. revert：设置为浏览器默认样式，比如 <a> 的 color 浏览器默认值为蓝色
4. revert-layer：设置为上一个级联层（ @layer ）中的属性值
5. unset：重置为自然值，如果属性是自然继承那么就是 inherit，否则和 initial 一样

重设所有属性值

将所有属性的值设为某一种继承属性值

.fix-this {
  all: unset;
}

长度单位

绝对长度

• cm，厘米，1cm = 37.8px = 25.2/64in
• 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

相对长度

• em，相对于父元素的字体大小，1em 表示浏览器字体默认宽度，2em 表示 2 倍大小。em 可以实现字体大小随列表嵌套深度增大的效果
• rem，相对于根元素（html）的字体大小，即 1rem 是固定的大小，它不会随着父元素变化
• vh 和 vw 分别相对于视口（浏览器显示网页的区域）的高度和宽度，100vh 表示整个视口高度，10wh 表示 10% 的视口宽度

百分比

• 如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。
• 如果使用百分比作为宽度值，那么它将是父值宽度的百分比
• 把百分数作为内外边距，值是以包含块的内联尺寸（通常为宽度）进行计算的，例如 margin: 10%;，即所有边的内外边距都为元素宽度的 10%

颜色值

RGB 和 RGBA

接收红、绿、蓝、（透明度）值

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

/* 添加了透明度参数，1表示完全不透明，下面例子表示有 30% 不透明，旧版 CSS 需要使用 rgba() 函数实现透明值 */

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

十六进制

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

HSL 和 HSLA

接收色相、饱和度、亮度、（透明度）值

• 色调：颜色的底色。这个值在 0 和 360 之间，表示 color wheel 周围的角度。
• 饱和度：颜色有多饱和？它的值为 0–100%，其中 0 为无颜色（它将显示为灰色阴影），100% 为全色饱和度
• 亮度：颜色有多亮？它从 0–100% 中获取一个值，其中 0 表示没有光（它将完全显示为黑色），100% 表示完全亮（它将完全显示为白色）

.one {
  background-color: hsl(188 97% 28%);
}

/* 添加了透明度参数，旧版 CSS 需要使用 hsla() 函数实现透明值 */

.one {
  background-color: hsl(188 97% 28% / 0.3);
}

calc() 函数

• 可以使用 + - * / 运算符
• 如下例子，宽度设置为父元素的 30% 加上 100px
• 注意运算符左右要有空格

.box {
  width: calc(30% + 100px);
}

特殊单位

某些单位只在特定属性中使用

• 网格布局中的 fr
• 旋转函数中的 deg