• 数值
  • 百分比
  • 颜色
  • 坐标位置

  • 函数

    数值

    长度和尺寸

    我们会在margin、padding、font-size等属性上设置长度或大小

  • 绝对单位：px，mm, cm, in

  • 相对单位：em，ex，ch，rem

em：1em与当前元素的字体大小相同，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。

rem：和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，所以这听起来像一个比em更好的选择，虽然在旧版本的IE上不被支持

vw/vh

vw 和 vh 分别是相对于屏幕视口宽度和高度而言的长度单位：

  • 1vw = 视口宽度均分成 100 份中 1 份的长度；
  • 1vh = 视口高度均分成 100 份中 1 份的长度；

在 JS 中 100vw = window.innerWidth，100vh = window.innerHeight

绝对长度单位

单位 名称 等价换算
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%


百分比

相对父级元素元素大小的百分比

数字

有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity ），它控制元素的不透明度(它的透明程度)。此属性接受0(完全透明)和1(完全不透明)之间的数字

颜色

  • 颜色关键字
  • transparent 关键字
  • currentColor 关键字
  • RGB 颜色
  • HSL 颜色

颜色关键字

下图是 16 个基础色，又叫 VGA 颜色。截止到目前为止 CSS 颜色关键字总共有 146 个，这里可以查看 完整的色彩关键字列表
【4】值和单位 - 图1

transparent

transparent 的字面意思就是透明。它用来表示一个完全透明的颜色，即该颜色看上去将是背景色。
也可以理解为它是
【4】值和单位 - 图2

currentColor

和 transparent 一样，它也是一个关键字，顾名思义，它表示当前颜色。它来自自属性或者继承于它的父属性。
可以简单的理解为当前 CSS 标签所继承或设定的文本颜色，即 color 的值。

RGB和RGBA

rgb() 表示颜色的红-绿-蓝（red-green-blue (RGB)）模式，rgba() 多一个 a ，表示其透明度，取值为 0-1。

HSL和HSLA

除了 rgb 表示法，颜色也可以使用 hsl() 表示。hsl()被定义为色相-饱和度-明度（Hue-saturation-lightness），hsla() 多一个 a ，表示其透明度，取值为 0-1。。

  • 色相（H）是色彩的基本属性，值范围是 0~360， 0 (或 360) 为红色, 120 为绿色, 240 为蓝色；
  • 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0~100% 的数值；0% 为灰色， 100% 全色；
  • 亮度（L），取 0~100%，0% 为暗，100% 为白；