css_04 | CSS——CSS 值和单位

时间 2019-11-06

标签 css 单位栏目 CSS 繁體版

原文原文链接

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

css_04
复制代码

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

前言： 本篇也是一篇纯基础、纯理论文章，但重要性毋庸置疑：“……在利用 CSS 能作的几乎全部工做中，其基础都是“单位”，这是影响全部属性的“颜色”、“距离”和“大小”的一种元素……若是理解了这里介绍的概念，你就能更快地学习和使用 CSS 的余下内容”。css

1 指定颜色

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

在此篇基础上，咱们能够很轻松的认识到：一个 Web 创做人员至少能够用 3 种方法来设置“颜色”。前端

1.1 按“颜色名”指定颜色

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

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 就是一个十六进制码。格式为：
bash

以 # 开头
按顺序分别用两位数字指定红、绿、蓝的份量
CC 为“红”的份量、66 为“绿”的份量、00 为“蓝”的份量

十六进制码并非基于 0-9 这 10 个数字，而是基于 0-F 这 16 个数字：0、一、二、三、四、五、六、七、八、九、A（对应 10）、B（对应 11）、C（对应 12）、D（对应 13）、E（对应 14）、F（对应 15）。编程语言

把“十六进制码” #CC6600 转化为“十进制”：函数

将十六进制颜色分解为“红”、“绿”、“蓝”分量：
红：CC
绿：66
蓝：00
以 CC 为例，咱们知道，十进制用两位数最大只能表示 99 ，而十六进制是想经过用两位数来表示 0-255 这全部 256 个值。
那意思就是，十进制是逢十进一，而十六进制是逢十六进一。
那同为两位数 CC ，在十进制下，是十位的 C 个10、个位的 C 个 1；而十六进制下，就是十六位下的 C 个十6、个位的 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 的值会相对于父元素的字体大小改变。

<body>
 回答问好
 <div class="div1">fine
    <div class="div2">thank you 
        <div class="div3">and you?</div>
    </div>
 </div>
</body>
复制代码

div {
    font-size: 1.5em;
}
复制代码

计算关系是这样的：
回答问好 的 font-size 是继承自跟元素 html，html 的尺寸是浏览器默认尺寸 14px ；
fine 的 font-size=1.5 ✖️14px = 21px ；
thank you 的 font-size=1.5 ✖️21px = 31.5px ；
and you? 的 font-size=1.5 ✖️31.5px = 47.25px ；

若是手动设置 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 ✖️14px = 21px = 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！

1. CSS--值和单位
2. HTML+CSS_04-CSS基本语法
3. CSS 单位长度与值
4. CSS中属性的值和单位
5. css中单位em和rem
6. CSS单位和颜色表
7. CSS的sprite和单位
8. css单位
9. CSS单位
10. css 单位
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• TiDB 在摩拜单车在线数据业务的应用和实践
• 适用于PHP初学者的学习线路和建议