跳至主要內容

CSS 中的颜色和单位

Weipeng Qiao大约 1 分钟

颜色

  1. HEX(十六进制颜色)
#ff0000(表示红色)
  1. RGB
rgb(0, 0, 255)(表示蓝色)
rgb(0%,0%,100%)(表示蓝色)
  1. RGBA
rgba(255, 0, 0, 0.3)(带有透明度的红色)0.3前面的0可以省略
  1. HSL
    w3copen in new window

  2. HSLA

  3. name(预定义/跨浏览器的颜色名称)open in new window - 在开发中几乎不用预定义颜色名 - red(红色)、blue(蓝色)transparent(透明色) - opacity 属性(定义透明\不透明度 取值: 0~1,值越低 越透明)
    使用 opacity 属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。(使用 RGBA 颜色值不会出现此类情况)

单位

绝对单位

单位含义备注
cm厘米
mm毫米
in英寸1in = 96px = 2.54cm
px像素
pt点
pc派卡1pc = 12 pt

相对单位

单位含义备注
em相对于自身元素的 font-size 字体大小 1font-size = 10em
rem相对于根元素(html)的 font-size 字体大小 1font-size = 10rem
ex相对于当前字体的 x-height(极少使用)
ch相对于 "0"(零)的宽度
vw相对于视口宽度的 1% , 10vw 就是视口宽度的 10%。
vh相对于视口高度的 1% , 10vh 就是视口高度的 10%。
vmin相对于视口较小尺寸的 1%
vmax相对于视口较大尺寸的 1%
%相对于父元素
上次编辑于:
贡献者: qiaoweipeng