图解CSS:CSS 的值和单位

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS 的值和单位是 CSS 另一个独立功能模块,到目前为止,该模块已到了 Level 4 阶段(CSS Values and Units Module Level 4)。今天我们就来聊聊这个模块里的内容。对于 CSSer 来说,对于 CSS 中的值和单位应该不会感到陌生,但大部分同学应该都会把精力集中于单位这一块,事实上也是如此,在这篇文章中,我们所涉及到的大部分内容也是聊单位这一块,对于值这一部分只会花一点点内容略为带过。

CSS 的值

在聊 CSS 的值之前,先给大家上一图:

上图只是我们常见的 CSS 样式规则之一。

事实上 CSS 是一门非常神奇的学科。我们在声明任何一个 CSS 的规则都可能会包括:

  • CSS 的选择器
  • CSS 的属性
  • CSS 的属性值
  • CSS 的属性值单位

而我们今天要聊的是 CSS 的属性值和单位。但事实上,CSS 不是每个规则都会同时包含 CSS 的属性值和单位,因为很多属性的值是只具有值,不具有单位的。比如上图的color属性,他的值就不带单位,但可以是关键词、字符串、函数等。你在写 CSS 的时候可能会涉及到的 CSS 的值会有:

  • 数值:长度值<length>,用于指定例如元素widthborder-widthfont-size等属性的值,这些值可能带有单位,也可能不带任何单位
  • 百分比:可以用于指定尺寸或长度,例如取决于父容器的widthheight或默认的font-size
  • 颜色:用于指定background-colorcolor
  • 坐标位置:以屏幕的左上角为坐标原点定位元素的位置,比如常见的background-positiontoprightbottomleft等属性
  • 函数:用于指定背景图片或背景图片的渐变,比如linear-gradient()image-set()

简单的概括一下:CSS 属性的值有多种,可以是数值、字符串、关键词或函数;同时 CSS 的属性的值可以带单位也可以不带单位。而且 CSS 的值并不是一尘不变的,不同的属性对应的值都会略有不同,比如:width属性,它的值可以是一个百分比的值,也可以是一个带有数值和单位;color的值可以是一个关键词,也可以是一个函数值;font-size可以是百分比、关键词,带有单位的数值;line-height可以只是一个数值,可以是百分比值,还可以是带有单位的数值等。众多属性不一一列举。

CSS 的单位

上面也提到了,CSS 属性值是带有单位,也有不带单位的。而 CSS 的单位对于 CSS 的值有是一个直接影响的。因为 CSS 的单位直接对 CSS 的值的计算是有直接影响的,在 CSS 中单位的之间有一个关系图,如下所示:

为了便于大家更好的理解和记住 CSS 中单位相关的知识点,下图是根据 W3C 规范重新做的划分:

那么在这篇文章中,我们主要围绕着 CSS 中常用单位来展开。介绍这些 CSS 单位使用的场景和使用细节。

绝对单位

在 CSS 中有些单位是绝对值,不受任何屏幕大小或字体的影响。这些单位的显示可能会根据不同的屏幕分辨率而有所不同,因为它们取决于屏幕的 DPI(每英寸上的点数)。绝对单位常用于一些物理测量上。在环境输出已知的情形下非常有用。在 CSS 中,绝对单位包括:pxincmmmpcpt等。其中px是我们最为常见的一个绝对单位。到目前为止,px在 CSS 的使用中也可以算是主流单位之一。

像素单位被认为是许多其他单位的测量基础。它提供了各种设备中一致的结果。也被认为是最好的设备像素,而这种像素长度和你在显示器上看到的文字屏幕像素元关。因为px实际上是一个按角度度量的单位,即像素角度

很多时候,px也常被称为 CSS 像素。它是一个绝对单位,但也可以被视为相对单位,为什么这么说呢?那是因为像素单位相对的是设备像素。在同一样的设备上,每1个 CSS 像素所代表的物理像素是可以变化的(即 CSS 像素的第一方面的相对性);在不同的设备之间,每1个 CSS 像素所代表的物理像素是可以变化的(即 CSS 像素的第二方面的相对性)。

根据维基百科的解释:

它是图像显示的基本单元,既不是一个确定的物理量,也不是一个点或者小方块,而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文!

不同的设备,图像基本采样的单元是不同的,显示器上的物理像素等于显示器的点距,而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别被称为PPI和DPI`。

由于不同的物理设备的物理像素的大小是不一样的,所以 CSS 认为浏览器应该对 CSS 中的像素进行调节,使得浏览器中1个 CSS 像素的大小在不同物理设备上看上去大小总是差不多 ,目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算,而 CSS 规范中使用"参考像素"来进行换算。

1个参考像素即为从一臂之遥看解析度为96DPI的设备输出(即1英寸96点)时,1点(即1/96英寸)的视角。它并不是 1/96 英寸长度,而是从一臂之遥的距离处看解析度为96DPI的设备输出一单位(即1/96英寸)时视线与水平线的夹角。通常认为常人臂长为28英寸,所以它的视角是:

(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

由于 CSS 像素是一个视角单位,所以在真正实现时,为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取 CSS 像素。

简单介绍一下一臂之遥:我们在使用不同设备输出时,眼睛与设备输出的典型距离是不同的。比如电脑显示器,通常是一臂之距,而看书和纸张时(对应于打印机的设备输出),则通常会更近一些。看电视时则会更远,比如一般建议是电视机屏幕对角线的2.53倍长 —— 如果你是个42英寸彩电,那就差不多是3米远。

这样描述对于很多 CSSer 太过于理论,我们还是回到实际中了。比如说我在项目中有一个盒子元素,它的大小是宽高都是150px,那么我们在 CSS 中常常这么使用:

.box {
    width: 150px;
    height: 150px;
}

虽然说,像素应该是设备和显示器中显示趋于一致,但是他越来越不正确。那是因为,随站 Retina 屏的出现,dpr不同(设备像素比),对像素和显示器显示会略有不同。比如下图所示:

正因如此,在移动端设计当中,大部分设计都采用2倍或3倍尺寸进行设计。

虽然说px是 CSS 最绝对单位中最常见,使用最频繁的一个单位。而事实上,CSS 中绝对单位不仅仅这一个,还有其他的绝对单位,比如in(英寸)、cm(厘米)、mm(毫米)、pcpt等。其中,incmmm可以和px直接进行换算:

  • 1in = 96px
  • 1cm = 37.8px
  • 1mm = 3.78px

pcptin有直接关系:

  • 1in = 72pt
  • 1in = 6pc

如果你希望ptpc直接和px进行换算的话,可以借助in为中间桥梁。比如:

  • 1in = 96px = 72pt,那么1px = 72 / 96 = 0.75pt
  • 1in = 96px = 6pc,那么1px = 6 / 96 = 0.0625pc

可以用一张简单的图来描述绝对单位之间的关系:

在规范中,绝对单位还有一个新单位,不怎么常见,即Q1Q相当于25mm。它被用于印刷排版。

相对单位

相对单位和绝对单位有所不同,相对单位是相对于另一个长度的长度。使用相对单元的样式更容易离开一个输出环境并适应另一个环境。CSS 的相对单位主要分为两大类,其一是字体相对单位,会根据font-size进行计算;其二是视窗相对单位,相对于视窗大小来决定。

字体相对单位

字体相对单位主要有emremexchcapiclhrlh。其中emremexch是较为常见的字体相对单位。在这里我们也只会介绍这几个常见的单位。

em

起初排版度量时是基于当天字体大写字母M的尺寸的。当改变font-family时,它的尺寸不会发生任何改变,但是在改变font-size的大小时,它的尺寸就会发生变化。

在 CSS 中,如果没有任何 CSS 规则影响的前提之下,1em的长度是:

1em = 16px = 0.17in = 12pt = 1pc = 4.mm = 0.42cm

众所周知,每个浏览器都有一个默认的font-size大小,而这个值通常是16px(用户未修改浏览器字号时)。这也就是为什么1em = 16px的原理所在。

em还有一点很重要:em和它们的祖先元素的font-size有关系。因此,如果祖先元素的font-size设置为0.5em

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-values-and-units.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部