阅读 1388

(04)CSS 值和单位 | CSS

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」
复制代码

2020.08.27 更新:
以下链接为本文最新勘误篇章——《CSS 值和单位》


1. 你有没有使用过视网膜分辨率的图形?当中使用什么技术?
2. px,em,rem,vw 有什么区别?
复制代码

🙋上方面试题“参考答案详解”,请点击此处查看获取方式!



前言: 本篇也是一篇纯基础、纯理论文章,但重要性毋庸置疑。

在利用 CSS 能做的几乎所有工作中,其基础都是“单位”,这是影响所有属性的“颜色”、“距离”和“大小”的一种元素。如果理解了本篇介绍的相关知识,你就能更快地学习和使用 CSS 的余下内容。


1 指定颜色

对于“颜色”的学习,让我们先认真复习文章:《用李涛高手之路前 3 节课开启我们光与色的大门 | Web 前置知识》

在此篇基础上,我们可以很轻松的认识到:一个 Web 创作人员至少可以用 3 种方法来设置“颜色”。

1.1 按“颜色名”指定颜色

CSS2.1 定义了 17 种颜色名,CSS3 中包含了基于标准 X11 RGB 值的 140 种颜色的扩展颜色表。如下例,这些颜色可以直接以“名字”的方式拿来用,大多数浏览器都能识别。

h1 {
  color: red;
}

h2 {
  color: green;
}

h3 {
  color: maroon;
} /* 褐红色 */
复制代码

但,这种颜色展示方式的弊端就在于,没办法指定色谱中任意的颜色。

1.2 函数式 RGB 指定颜色

如下例,可以用“整数记法”,也可以用对应的“百分数记法”。二者没有孰优孰劣之分,实际工作中“整数记法”更常用,更有用。

❗️百分数是针对“255”来相应计算的,因为,RGB 三者中的任何一种光都有 0-255 个颜色的位置(0 是接近无颜色,255 就是很纯的红、绿、蓝)。实际工作中,没必要对二者进行转换。

h1 {
  color: rgb(255, 0, 0);
} /* 红色 */

h3 {
  color: rgb(50%, 0%, 0%);
} /* 褐红色 */

h3 {
  color: rgb(128, 0, 0);
} /* 褐红色 */
复制代码

1.3 十六进制 RGB 指定颜色:

h1 {
  color: #CC6600;
}
复制代码

❗️上例代码中,#CC6600 就是一个十六进制码。格式为:

  • # 开头;

  • 按顺序分别用两位数字指定红、绿、蓝的分量;

  • CC 为“红”的分量、66 为“绿”的分量、00 为“蓝”的分量。

十六进制码并不是基于 0-9 这 10 个数字,而是基于 0-F 这 16 个数字:0、1、2、3、4、5、6、7、8、9、A(对应 10)、B(对应 11)、C(对应 12)、D(对应 13)、E(对应 14)、F(对应 15)。

把“十六进制码” #CC6600 转化为“十进制”:

  • 将十六进制颜色分解为“红”、“绿”、“蓝”份量:
    红:CC
    绿:66
    蓝:00

  • 以 CC 为例,我们知道,十进制用两位数最大只能表示 99,而十六进制是想通过用两位数来表示 0-255 这所有 256 个值。



那意思就是,十进制是逢十进一,而十六进制是逢十六进一。

那同为两位数 CC,在十进制下,是十位的 C 个十、个位的 C 个 1;而十六进制下,就是十六位下的 C 个十六、个位的 C 个 1。

故:十六进制下的 CC 转化为十进制为:12✖️16 + 12✖️1 = 204。

  • 同理得:
    • 66:6✖️16 + 6✖️1 = 102
    • 00:0✖️16 + 0✖️1 = 0

即:

h1 {
  color: #CC6600;
}
复制代码

等同于:

h1 {
  color: rgb(204, 102, 0);
}
复制代码

也等同于:

h1 {
    color: rgb(80%, 40%, 0%);
}
复制代码

💡当然,要把 RGB 十进制转化为十六进制则是:用十进制数字➗16,所得数字小数点前的整数部分为“十六位”;再将小数点后的数乘以 16,所得的数为个位。


2 绝对长度单位

描述现实世界的长度单位有很多。

厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派卡(pc)等都属于绝对长度单位。“点”和“派卡”是印刷术语,用作印刷的度量单位。

  • 1 英寸 = 2.54 厘米

  • 1 厘米 = 0.394 英寸

  • 1 英寸 = 72 点

  • 1 英寸 = 6 派卡

  • 1 派卡 = 12 点

为什么我们要使用这么多的单位?可以简单理解成不同地区对长度单位的定义不同,有各种各样的历史遗留问题。

我们在现实世界中描绘的长度,是一维空间(点到点的长度表示的内容)的度量,是客观存在且固定的物理距离,只是人们会用不同的单位去表达。而对于电子屏幕,使用的长度单位和方式,和一维世界是不同的。

对于当今的编程语言来说,长度是一个相对的概念。


3 相对长度单位

3.1 px

显示器成像是由无数个可以发出单一色彩的显像管组成,而这个最小的成像单位和长度,我们就称为——像素。而一台显示器,包含的有效像素,即称为——分辨率,通常使用宽、高的像素数量进行标示。理论上越大的分辨率,可以容纳的画面内容就越多(显示的内容更多、更清晰)。

px 被定义为相对单位,是因为它取决于显示器的分辨率。一旦分辨率确定,设置为 px 的尺寸就成为固定尺寸,不会自动缩放。

但,关于 px 我们还有以下信息需要掌握:

如果我们同时使用分辨率为 1920*1080 的两个屏幕,尺寸不一样,那么就出现了新的概念—— PPI,即“每英寸包含的像素数量”(像素的密度单位,PPI 值越高,画面的细节就会越丰富)。

DPI ——是指输出分辨,针对输出设备而言的,每英寸包含的墨点数量。

❗️所以,像素(px)在真实世界中的大小是不固定的。曾经,普通的显示器里,我们用像素就可以描述大多数的情况。但是,“视网膜屏幕 Retina”诞生后,旧有平台的图像如果根据其实际像素在视网膜屏幕中显示时,字体、图标等就会变得特别小:

为了适应实际使用体验和兼容性,厂商发展出了“像素合并技术”(输出来的图像、文字比以前更细腻,因为可以显示的细节更多),过去 1px 的面积包含了更多的像素单位:

所以,很多时候直接使用 px 作为长度单位已经无法满足日常的需求,需要依具体情况而定。

💡在以后学习的移动端前端开发中,iOS 和安卓没有“像素”这个单位,我们用 PT/DP 来描绘在一个屏幕中各个元素的大小。

3.2 em

1em 被定义为一种给定字体的 font-size 值。

如下例,当 em 用于设置元素的 font-size 属性本身时,em 的值会相对于父元素的字体大小改变。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>前端一万小时</title>
</head>
<body>
  回答问好
  <div class="div1">fine
    <div class="div2">thank you 
      <div class="div3">and you?</div>
    </div>
  </div>
</body>
</html>
复制代码
div {
  font-size: 1.5em;
}
复制代码

计算关系是这样的:

  1.  回答问好 的 font-size 是继承自根元素 <html><html> 的尺寸是浏览器默认尺寸 16px;
  2.  fine 的 font-size = 1.5*16px = 24px;
  3.  thank you 的 font-size = 1.5*24px = 36px;
  4.  and you? 的 font-size = 1.5*36px = 54px。

如果手动设置 thank you 的 font-size 为 40px,那么 and you? 的 font-size 应该为 1.5*40px = 60px。

但,由于 em 的值会随元素的不同而发生变化,这给计算带来极大的困难。于是,就产生了 rem 这个相对单位。

3.3 rem

rem——root em 是相对于根元素 <html> 的字体大小单位。

例如还是上面的 HTML 代码,添加如下样式:

.div3 {
  font-size: 1.5rem;
}
复制代码

此时 and you? 的 font-size = 1.5 * 16px = 24px = 1.5 * html 的 font-size。

3.4 ex

ex 是一个相对长度单位,1ex 被定义为一种给定字体的小写字母 “x” 的高度。因此,这个值会随字体的不同而变化。

然而,很多浏览器都没有内置 ex 高度值,只是简单的取 em 的值,再取其一半作为 ex 的值。所以,一般不推荐使用 ex 这个长度单位。

3.5 视口单位 vw、vh、vmin、vmax

3.5.1 vw

视口宽度的1/100。

3.5.2 vh

视口高度的1/100。

例如,桌面端浏览器视口尺寸为 650px,那么 1vw = 650 * (1/100) = 6.5px (这是理论推算得出,一般浏览器不支持 0.5px,那么实际渲染结果可能是 7px)。

3.5.3 vmin

vw 和 vh 中的最小值。

3.5.4 vmax

vw 和 vh 中的最大值。

例如,浏览器的宽度设置为 1200px,高度设置为 800px, 1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px。如果宽度设置为 600px,高度设置为 1080px,1vmin 就等于 6px,1vmax 则为 10.8px。



后记: CSS 值和单位包含的面很广,细小的知识点还有很多,且各个单位也各有优缺点,需要在具体情况下酌情使用。不必一蹴而就,慢慢来,慢慢地把各个知识点击破。

祝好,qdywxs ♥ you!