值与单位

Mr.Hope ... 2019-09-06 CSS 大约 8 分钟

# CSS 的值

在 CSS 规范上,您将能够发现值的存在,CSS 有多种值类型,它们被尖括号包围,如 <color><length>

当您看到值 <color> 对特定属性有效时,这意味着您可以使用任何有效的颜色作为该属性的值。

# 数字,长度和百分比

数值类型 描述
<integer> 整数。如 1024-55
<number> 小数 (也可以为整数)。如: 0.255128-1.2
<dimension> <number> + 附加单位。如: 45deg5s10px
<dimension>是一个大类别,包括 <length><angle><time><resolution> 类型。
<percentage> 一些其他值的一部分,例如 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/16th of 1in
pt 1pt = 1/72th of 1in
px 像素 1px = 1/96th of 1in

# 相对长度单位

相对长度单位相对于其他一些东西,比如父元素的字体大小,或者视图端口的大小。利用它们,您可以使文本或其他元素的大小与页面上的其他内容相对应。

单位 相对于
em 在 font-size 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如 width
ex 字符“x”的高度
ch 数字“0”的宽度
rem 根元素的字体大小
lh 元素的 line-height
vw 视窗宽度的 1%
vh 视窗高度的 1%
vmin 视窗较小尺寸的 1%
vmax 视图大尺寸的 1%

# em 和 rem

em 和 rem 是您在从框到文本调整大小时最常遇到的两个相对长度。

  • em 单位的意思是“父元素的字体大小”。
  • rem 单位的意思是“根元素的字体大小”。

也就是一个是相对于父元素,一个是相对于整个文档的默认字号。

# 百分比

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

注意

虽然许多值接受长度或百分比,但也有一些值只接受长度。您可以在 MDN 属性 引用页面上看到它能接受哪些值。如果允许的值包括 <length-percent>,则可以使用长度或百分比。如果允许的值只包含 <length>,则不可能使用百分比。

# 数字

有些值接受数字,不添加任何单位。

# 颜色

# 颜色关键词

CSS 预设了一些关键词,比如 black white red 等。

相关信息

颜色词的完整列表,请看 MDN → color (opens new window)

# 十六进制 RGB 值

这种颜色值类型是十六进制代码。每个十六进制值由一个 # 和六个十六进制数字组成,每个十六进制数字都可以取 0 到 f(代表 15)之间的 16 个值中的一个。每对值表示一个通道。通道依次为: 红色、绿色和蓝色。每个通道可以指定 256 个可用值中的任意一个。

# RGB 和 RGBA

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

RGBA 的工作方式与 RGB 完全相同,但有第四个值表示颜色的 alpha 通道,它控制不透明度。如果将这个值设置为 0,它将使颜色完全透明,而设置为 1 将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。

注意

在颜色上设置 alpha 通道与使用我们前面看到的 opacity 属性有一个关键区别。当你使用不透明度时,你让元素和它里面的所有东西都不透明,而使用 RGBA 颜色只让你指定的颜色不透明。

# HSL 和 HSLA

hsl() 函数接受色调、饱和度和亮度值作为参数,而不是红色、绿色和蓝色值,这些值的不同方式组合,可以区分 1670 万种颜色:

  • 色调: 值在 0 和 360 之间,表示色轮周围的角度。
  • 饱和度: 值为 0 - 100%,其中 0 为无颜色(它将显示为灰色阴影),100%为全色饱和度
  • 亮度: 从 0 - 100%中获取一个值,其中 0 表示没有光(它将完全显示为黑色),100%表示完全亮(它将完全显示为白色)

就像 RGB 和 RGBA,HSL 有 HSLA,它使您能够指定 alpha 通道值。

# 图片

<image> 数据类型用于图像为有效值的任何地方。它可以是一个通过 url() 函数指向的实际图像文件,也可以是一个渐变。

# 位置

<position> 数据类型表示一组 2D 坐标,用于定位一个元素,如背景图像(通过 background-position)。它可以使用关键字(如 top, left, bottom, right 以及 center )将元素与 2D 框的特定边界对齐,以及表示框的顶部和左侧边缘偏移量的长度。

一个典型的位置值由两个值组成——第一个值水平地设置位置,第二个值垂直地设置位置。如果只指定一个轴的值,另一个轴将默认为 center。

# 字符串和标识符

CSS 中的某些值接受字符串,字符串必须用引号包裹起来。

标识符

某些关键词是合法的值(例如 <color>关键字,如 red, black, rebeccapurple, goldenrod)。这些关键字被更准确地描述为标识符,一个 CSS 可以理解的特殊值。它们并不是字符串,因此它们不能使用引号括起来。

# 函数

在编程中,函数是一段可重用的代码,可以多次运行,以完成重复的任务,对开发人员和计算机都是如此。函数通常与 JavaScript、Python 或 c++等语言相关联,但它们也以属性值的形式存在于 CSS 中。我们已经在颜色部分看到了函数: rgb()hsl() 等。用于从文件返回图像的值 url() 也是一个函数。

行为更类似于传统编程语言的值是 calc() 函数。这个函数使您能够在 CSS 中进行简单的计算。如果您希望计算出在为项目编写 CSS 时无法定义的值,并且需要浏览器在运行时为您计算出这些值,那么它特别有用。