论CSS常用单位的前世今生
目录：
一、---------------------------浅析CSS的组成
二、----------------------------浅析CSS的值
三、----------------------------CSS的单位
3.1---------------------------css单位概括
3.2---------------------------绝对单位
3.2.1---------------------css像素单位：px
3.2.2---------------------pt、pc
3.2.3---------------------pt、pc
3.3---------------------------相对单位
3.3.1---------------------em和rem
3.3.2---------------------ex和 ch
3.3.3---------------------视窗相对单位
3.3.2---------------------角度单位
3.3.3---------------------百分比单位
3.3.2---------------------时间单位
3.3.3---------------------频率单位
[if !supportLists]一、[endif]浅析CSS的组成
事实上CSS 是一门非常神奇的学科。我们在声明任何一个 CSS 的规则都可能会包括：
[if !supportLists]· [endif]a：CSS 的选择器
b：CSS属性
c：CSS的值
d：CSS的单位
试例如图：
而CSS 的值和单位是 CSS 相关的另一个独立功能模块，到目前为止，该模块已到了 Level 4 阶段（CSS Values and Units Module Level 4）。今天我们就来聊聊这个模块里的内容。
[if !supportLists]二、[endif]浅析CSS的值
事实上，CSS 不是每个规则都会同时包含 CSS 的属性值和单位，因为很多属性的值是只具有值，不具有单位的。比如上图的color属性，他的值就不带单位，但可以是关键词、字符串、函数等。你在写 CSS 的时候可能会涉及到的 CSS 的值会有：
a：数值：长度值<length>，用于指定例如元素width、border-width、font-size等属性的值，这些 值可能带有单位，也可能不带任何单位
b：百分比：可以用于指定尺寸或长度，例如取决于父容器的width、height或默认的font-size
c：颜色：用于指定background-color、color等
d：坐标位置：以屏幕的左上角为坐标原点定位元素的位置，比如常见的background-position、top、 right、bottom和left等属性
e：关键字：用于指定特定属性的样式，比如position、display等
f：函数：用于指定背景图片或背景图片的渐变，比如：
ps：还有其它类型这里不过多赘述。
[if !supportLists]三、[endif]CSS的单位
1、css单位概括
CSS 的单位对于 CSS 的值有是一个直接影响的。因为 CSS 的单位直接对 CSS 的值的计算是有直接影响的，在 CSS 中单位的之间有一个关系图，如下所示：
为了便于大家更好的理解和记住CSS 中单位相关的知识点，下图是根据 W3C 规范重新做的划分：
那么在这篇文章中，我们主要围绕着CSS 中常用单位来展开。介绍这些 CSS 单位使用的场景和使用细节著作权归作者所有。
[if !supportLists]2、[endif]绝对单位：
不受任何屏幕大小或字体的影响。这些单位的显示可能会根据不同的屏幕分辨率而有所不同，因为它们取决于屏幕的DPI（每英寸上的点数）。绝对单位常用于一些物理测量上。在环境输出已知的情形下非常有用。
a：css像素单位：px
根据维基百科解释：它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。很多时候，px也常被称为 CSS 像素。
像素单位被认为是许多其他单位的测量基础。实际上px是一个按角度度量的单位，即像素角度。
像素角度：1个参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。它并不是1/96 英寸长度，而是从一臂之遥的距离处看解析度为96DPI的设备输出一单位（即1/96英寸）时视线与水平线的夹角。通常认为常人臂长为28英寸，所以它的视角是：(1/96)in / (28in * 2 * PI）/ 360deg= 0.0213度图解如下:
Ps:建议是电视机屏幕对角线的2.5到3倍长
px是一个绝对单位，但是由于各种设备的dpi不同，所以px也有其相对性
》在同一样的设备上，每1个 CSS 像素所代表的物理像素是可以变化的。
》在不同的设备之间，每1个 CSS 像素所代表的物理像素是可以变化的。
因此，px虽然是绝对单位，（在96dpi下 1px=1/96in），但是由于其相对性。
b：pt、pc
pt：点(Point)，指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关。
pc：派卡(Pica)，绝对长度单位。相当于我国新四号铅字的尺寸。
Ps：css绝对单位的换算关系
1in = 96px
1cm = 37.8px
1mm = 3.78px
1in = 72pt
1in = 6pc
1in = 96px = 72pt，那么1px = 72 / 96 = 0.75pt（标准情况下）
1in = 96px = 6pc，那么1px = 6 / 96 = 0.0625pc
由于不同的物理设备的物理像素的大小是不一样的，所以CSS认为浏览器应该对 CSS 中的像素进行调节，使得浏览器中1个 CSS 像素的大小在不同物理设备上看上去大小总是差不多 ，目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，而CSS 规范中使用"参考像素"来进行换算。
[if !supportLists]3、[endif]绝对单位：
a：em和rem
em：
在CSS 中，如果没有任何 CSS 规则影响的前提之下，通常情况下：
1em的长度是：1em = 16px = 0.17in = 12pt = 1pc = 4.mm = 0.42cm
<body style=“font-size:1.5em”>
<h3 style=“font-size:1.5em”>哈哈哈<h3>
<body>
从上面的简单示例，我们可以得知，随着DOM 元素的嵌套加深，同时不同层级都显式设置font-size的值为em，那将会增加em计算和转换的复杂度。像这样：
所以：1 ÷ 父元素的font-size × 需要转换的像素值 = em值
如果在非font-size的属性上使用em做为<length>值的单位时，将会受元素font-size的影响。在众多开发者中有一个比较普遍的语解，认为em单位是相对于父元素的font-size。而事实上呢？它们是相对于使用em单位元素的font-size。父元素的font-size可以影响em值，但这种情况的发生，纯粹是因为继承。
em单位除了应用于font-size属性之外，还可以运用于可以使用<length>值的其他属性，比如width、margin、padding、border-width和text-shadow等等。
rem：rem相对于em而言没有那么复杂，他仅仅是相对于根元素<html>的font-size计算
任何值为1rem的元素都等于16px，当然，其前提是浏览器默认的font-size没有被用户重置，或者未显式的给html元素设置font-size值；另外，rem可以不管它的父元素的font-size如何！
Ps:适合的才是最好的
· rem和em在客户端中计算出来的样式值都会以px显式
· rem相对于根元素html的font-size计算，em相对于元素font-size计算
· rem可以从浏览器字体设置中继承font-size值，em可能受任何继承过来的父元素font-size的影响
· 使用em应该根据组件的font-size来定，而不是根元素的font-size来定
· 在不需要使用em单位，并且需要根据浏览器的font-size设置缩放时，应该使用rem
b：ex 和 ch
ex和ch是排版单取决于元素的font-family，也就是说元素的font-family样式对ex和ch单位值的计算有直接关系和影响，因此，它们要求浏览器在计算值和应用样式之前要确定好引用的font-family，但是，这也是ex和ch单位比其它绝对单位更灵活的地方。
ex：
ex单位的值来自它们所计算的字体上下文的x高度,x高度由两个因素决定：font-family和font-size。换句话说，它们等于特定字体在特定font-size下的x高。实例如下图：
备注：W3C中介绍，如果在文档中没有x出现，一种可能的启发方法是查看小写“o”的字形延伸到基线以下的距离，并从其边界框的顶部减去该值。在无法确定x-height的情况下，必须假设值为0.5em。
ch：
从字体的0字形宽度中提取它们的值，它还随字体而变化。如此一来，就有点随意，而0的宽度通常是对字体的平均字符宽度，这是一个估计值，所以会有点糟糕.实例如下：
备注：由于ch单位是一个近似等宽的一个单元，因此在设置容器的宽度是特别的有用。比如说，你想让容器显示特定数量的字符串时，就可以使用ch单位。
ex和ch简单可以用下图理解：
c:视窗相对单位
在PC 端，视窗指的是浏览器的可视区域，而在移动端中相对来说更为复杂一些，它包括三个视窗：布局视窗（Layout Viewport）、视觉视窗（Visual Viewport）和理想视窗（Ideal Viewport）：
而我们要说的视窗单位中的视窗指的是：PC 端指的是浏览器可视区域，移动端的是布局视窗（Layout Viewport）
· vw：视窗宽度的百分比
· vh：视窗高度的百分比
· vmin：当前较小的vw和vh
· vmax：当前较大的vw和vh
简单的来看看视窗单位是如何进行计算的。例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。vh和vw总是与视窗的高度和宽度有关，与之不同的，vmin和vmax是与视窗宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin
d：角度单位
常用角度
角度最常用的用法之一就是在CSS 中给旋转元素设置一个旋转角度（度数），依赖于 CSS 的transform属性中的rotate()，skew()函数等
渐变中的角度linear-gradient（）
· 0deg的意思就是to top
· 角度的默认值（也就是角度没有设置），它的值是to bottom，也和180deg相同
HSL 中的角度
其中HSL分别是色相（Hue），饱和度（Saturation）和亮度（Lightness）三个单词的首字母。
HSL中的H，也就是颜色的色相，它指定色相的方式是以度数为单位的，这些度数映射到色盘上的颜色，比如像下图这样：
其他度数单位
· 百分度（grads）：一个分度，或者说是百分度相对于1/400个整圆，跟角度单位一样，支持负值，负值表示逆时针方向，其中100grad相当于90deg
· 弧度（rad）：在Canvas用到弧度，1rad等于180/π度（大约为57.3deg）,另外1.570796326794897rad相当于100grad或是90deg
· 圈数（turn）：1圈等于360deg
· rad = (π / 180) * deg
· deg = (rad * 180) / π
d：百分比单位
CSS 中百分比%单位也是一个很重要也是很常用的单位，和px、em类似，在CSS 中接受<length>值的属性都可以使用%单位。百分比是一定要有其对应的参照值，也就是说，百分比值是一种相对值，任何时候要分析它的计算值，都需要正确的找到它的参照值。言外之意，CSS中的百分比单值最终计算出来的值是可变的
定位中的百分比
在CSS 中用来控制position位置的top、right、bottom和left都可以使用百分比作为单位。如果它们的值为百分比时，其对应的参照物是包含块（但不一定是其父容器）同方向的width或height计算。刚才提到过，定位属性中的参照物：包含块并不一定是其父容器。为什么这么说呢？因为在CSS 中position对应的属性值不一样，其对应的包含块也将不同：
· 如果元素为静态（static）或相对定位（relative），包含块一般是其父容器
· 如果元素为绝对定位（absolute），包含块应该是离它最近的position为absolute、relative或fixed的祖先元素
· 如果元素为固定定位（fixed），包含块就是视窗（viewport）
盒模型中的百分比
CSS 中的盒模型对应的属性主要有height、min/max-height、width、min/max-height、padding、margin和border等属性。不同的属性其对应的参照物也有所不同。
· height、min/max-height属性的值为百分比时，其相对于包含块的height进行计算
· width、min/max-width属性的值为百分比时，其相对于包含块的width进行计算
· padding和margin相对来说更为复杂一些，如果书写模式是水平的，则相对于包含块的width进行计算；如果书写模式是垂直的，则相对于包含块的height进行计算
文本中的百分比
在CSS 中控制文本的属性常见的有font-size、line-height、text-indent、vertical-align等。不同的属性其参照物也是有所不同：
· font-size是基于父元素中font-size进行计算
· text-align和padding有点类似，和书写模式有一定的关系。如果书写模式是水平的，则相对于width进行计算，如果是垂直的，则相对于height进行计算
· line-height则基于font-size进行计算
· vertical-algin则基于line-height计算
边框和圆角中的百分比
在CSS 中border-width属性是不支持%单位的，但在border-radius和border-image-width两个属性上是可以使用百分比为单位的。如果在border-radius中使用百分比单位，也就是说圆角的半径是通过百分比来进行计算的，即：水平方向的半径是相对于元素width计算，垂直方向的半径是相对于元素高度进行计算。
背景属性中的百分比
在背景属性中，background-size、background-origin和background-position属性都可以使用百分比作为单位。其中background-size则是基于background-origin区域的大小进行计算。可以对背景图像进行缩放处理。对于background-position中的百分比，相对而言更为复杂一些，需要通过一些数学公式计算：
（容器尺寸- 背景图像尺寸）* 百分比值：
变换中的百分比
· translateX()的百分比相对于容器的width计算
· translateY()的百分比相对于容器的height计算
· transform-origin中横坐标（x）相对于容器的width计算；纵坐标（y）相对于容器的height计算
Ps，在translate还有一个z轴的函数translateZ()。它是不接受百分比为单位的值。著作权归作者所有。
百分比值的继承
当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值本身。例如，一个元素的font-size是14px，并定义了line-height:150%;，那么该元素的下一级子元素继承到的line-height就是21px，而不会再和子元素自己的font-size有关。
e：时间单位
CSS 中有两个常见的时间单位，即秒（s）和毫秒（ms）。其中1s = 1000ms。这两个单位常用于CSS 中transition-duration、transition-delay、animation-duration和animation-delay属性中。
f：频率单位
频率值使用在听（或说）级联样式表中，有两个单位值，及赫兹（Hz）和千赫（kHz），有点毫秒和秒的感觉。频率可以被用来改变一个语音阅读文本的音调。低频率是低音，高频率，高音。
例如：
文档参考：https://www.w3cplus.com/css/css-values-and-units.html
来源公司技术分享--刘鹏真
网友评论