01-CSS中的长度尺寸单位和颜色

什么是CSS

CSS的全称是：层叠样式表（Cascading Style Sheets），是一种样式表语言，用来描述HTML或者XML文档的呈现。也就是文档在屏幕上如何被渲染。

来看一下淘宝首页 的CSS实例：

CSS代码，就是选中对应的HTML元素，然后给属性赋值，使元素展现出指定的样式。例如：

/*选中了body元素*/
body {
    /*给背景色属性赋值为红色*/
    background-color: red;
}

CSS中的长度尺寸单位: px

CSS是描述文档如何显示的，在显示的过程中，HTML元素的长宽、间距、字体大小等等，都需要通过长度尺寸单位来表示。我们常常会说：字体大小16像素， 间距10个像素。这里的像素，就是CSS中的长度尺寸单位。一个像素写作1px，那么1px在屏幕中到底占用了多少的空间呢？

1px等于多少厘米

我们先来看一个实测。我写了一个很简单的网页，网页中有一个HTML元素:width: 300px，将这个网页在不同的显示器下全屏，然后用尺子量了一下（mac上的尺子工具要花钱，所以就人工量了）。

注意：上述图片由于拍摄角度问题，存在些许误差。

1cm大家都知道有多大。不管在哪儿显示，1cm就是1cm。但是300px在不同的屏幕上，显示的长度却是不一样的。CSS中的像素px, 其实是一种逻辑单位。

绝对长度单位、屏幕尺寸以及屏幕分辨率

要彻底理解CSS中的像素px，先从身边的事物开始讲起。

比如，我们经常会听到，iphone14的屏幕尺寸就是6.1英寸。英寸是英国那边的长度单位。1英寸 = 2.54厘米。也就是说，iphone14的屏幕尺寸是： 6.1 * 2.54 = 15.494厘米。像厘米，英寸这样的长度单位，叫做绝对长度单位。

屏幕尺寸是如何计算的呢？其实是计算的屏幕对角线的长度。

那么，屏幕分辨率又是怎么回事呢？

屏幕分辨率：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素横向像素来表示屏幕的分辨率，如 1960 * 1080。

注意：这里的 像素px 与 CSS中的像素px ，不一定相等。

像素点其实就是一个一个的小方块，是屏幕展示画面的最小单位。下面这张图，可以比较形象的表示像素点：

iphone14的像素为：2532px * 1170px。其对角线的像素点个数为：

每英寸内包含的像素点个数为：2789 ➗ 6.1 ≈ 460;

这里的每英寸内包含的像素点个数被称为屏幕像素密度(pixels per inch)，简写为：ppi。在计算机屏幕上，ppi 经常也被称为：dpi(dots per inch).

ppi越高，我们通过屏幕肉眼可见的画面就越清晰。

Chrome针对不同的ppi，对显示屏幕进行了分类,

Apple直接将屏幕分为了非高清屏、高清屏、超高清屏。我们平时所说的2k屏，4k屏，就是分辨率达到了特定值的屏幕。

设备像素比(DPR)与CSS中的px

在web开发中，有一个设备像素比(devicePixelRatio)的概念，简称为：DPR。在浏览器中（主要是移动端），可以通过window.devicePixelRatio来获取这个值。这个值是像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小的比。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。CSS像素是一个逻辑上的概念。

注意：桌面端电脑的DPR值，是可以自定义的。window.devicePixelRatio并不能获取准确的DPR值。Windows电脑的DPR值，可以通过修改屏幕分辨率设置，一般情况下为1。MAC OS的DPR值，可以通过系统的显示器设置查看。

假设在dpr=2的情况下，我们在CSS中的1px，在屏幕上，就需要用2个物理像素来表示。结合之前的内容,

∵ ppi = 每英寸内包含的像素点个数 
∴ 一个物理像素实际宽度 = 1 / ppi。
∴ 300px宽的HTML元素实际的宽 = 一个物理像素实际宽度 * 300 * DPR = 1 / ppi * 300 * DPR

下面，我们来试着回答一开始的问题，1px到底等于多少厘米。下图列出了我电脑的配置以及计算过程：

可以看到，计算出来的过程与上面用卷尺量出来的长度是相符合的。

提示: CSS中除了px可以表示长度以外，还有em, rem等。而移动端中的尺寸计算，还涉及到一个重要的概念：viewpoint。这些将在后面的内容中详细介绍。

小结

我们生活中提到的像素与web开发中的提到的像素是不同的。CSS中的1px最终表现出来，到底有多大的尺寸，取决于屏幕本身的分辨率和屏幕的分辨率设置。除了屏幕，我们平时也会说一个图片的大小是m像素 * n像素，这是逻辑像素。而图片的真实尺寸，是等于图片像素值 / 图片的dpi。

CSS中的颜色

在CSS中表示颜色，有三种方法：关键字，RGB，HSL.

关键字表示颜色

可以直接用一个颜色的英文单词来表示一个颜色。例如：red, blue, green等等。例如：

/*背景色为蓝色*/
background-color: blue;
/*背景色为海蓝色*/
background-color: Aquamarine;
/*完全透明的颜色，即该颜色看上去将是背景色*/
background-color: transparent;

颜色的关键词有不少，但是某些未知的关键字浏览器无法识别。除了常见的颜色，一般不建议使用关键字来表示颜色。

RGB表示颜色

RGB，即 red-green-blue (红，绿，蓝)。红绿蓝是色光三原色，通过这三种颜色的组合，可以叠加出任何的颜色。

其中一个格式为：rgb(红色数值，绿色数值，蓝色数值) 每一种颜色的数值的取值范围为：0 - 255。数字越大，表示所占比例越重。

/* 背景为红色 */
background-color: rgb(255, 0, 0);
/*背景色为白色*/
background-color: rgb(255, 255, 255);
/*背景色为灰色*/
background-color: rgb(111, 111, 111);

带透明通道的格式为：rgba(红色数值，绿色数值，蓝色数值，透明度)。透明度的取值为0到1之间的小数或者百分比。1表示完全不透明。

/* 背景为黑色，透明度为0.1 */
background-color: rgba(0, 0, 0, 0.1);

另外一个格式为：#RRGGBB(AA) 每一位都是16进制数即0-f。

/* 背景为红色 */
background-color: #ff0000;
/* 背景为红色, 上面写法的简写 */
background-color: #f00;
/* 背景色为黑色，透明度为0.06 */
background-color: #0000000f;

RGB表示颜色是最常用的方法了。当带有透明度的时候，一般采用rgba(红色数值，绿色数值，蓝色数值，透明度)的格式，比较方便。

HSL表示颜色

颜色也可以使用 hsl() 函数符被定义为色相 - 饱和度 - 亮度（Hue-saturation-lightness）模式。加上透明度即为：hsla()

h: 定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
s: 定义饱和度; 0% 为灰色， 100% 全色
l: 定义亮度 0% 为暗, 50% 为普通, 100% 为白
a: 透明度。0（透完全明） ~ 1（完全不透明）

/* 背景色为绿色 */
background-color:hsl(120,100%,50%);
/* 背景色为绿色，透明度为 0.5 */
background-color:hsl(120,100%,50%, 0.5);

总结

本文主要介绍了CSS中的尺寸单位px和颜色的表示方法，这是前端样式的基础。有很大一部分CSS属性都是通过设置尺寸或者颜色来工作的。