CSS 的数值与单位px\em\%

你会在很多地方看到 CSS 单位中使用到数值。下面为大家介绍数值的最常用类别。

颜色值

在网页中的颜色设置是非常重要，有字体颜色，背景颜色，边框颜色等，设置颜色的方法也有很多：

1.英文命名颜色

p {
  color: pink;
}
/*给p标签的字体颜色设置为粉色*/

2.RGB 颜色

由 Red、Green、Blue 三种颜色的比例来配色，简称 RGB。

p {
  color: rgb(154, 32, 432);
}

每一项的值可以是 0~255 之间的整数，也可以是 0~100% 的百分数，如：

p {
  color: rgb(30%, 20%, 40%);
}

3.十六进制颜色

现在较为普遍的颜色使用法，其原理其实也是 RGB 设置，但是其每一项的值由 0~255 变成了十六进制 00-ff。

p {
  color: #00eeff;
}

长度值

长度单位总结了几种常用单位：px，em，%，这三种单位都是相对单位。

1.像素

px 像素（Pixel）。相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的。

特点：

IE 无法调整那些使用 px 作为单位的字体大小。
国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位。

2.em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em=14px。如果 font-size 为 18px，那么 1em=18px。

p {
  font-size: 14px;
  line-height: 2em;
}


/*在这里的line-height行高被设置成了14*2=28px*/

3.百分比

p {
  font-size: 14px;
  line-height: 120%;
}
/*行高为：14*1.2=16.8*/

创作不易，大侠请留步… 动起可爱的双手，来个赞再走呗 (๑◕ܫ￩๑)