CSS面试题-计量单位 | “朝闻道”知识分享大赛

[小年华°Moon]

这是我参加朝闻道知识分享大赛的第16篇文章。

注：CSS面试题分享板块的内容均为常见的前端面试中会涉及的知识点。
       具体的问题内容大同小异，大家遇到时具体问题具体分析即可。

前言：本文主要向大家介绍了CSS中不同的计量单位，有助于帮助大家在页面布局时更好的理解页面呈现给用户的显示大小。

目录

1. 总述

2. 相对单位

2.1 %

2.2 ex、ch

2.3 em、rem

2.4 vw、vh、vmax、vmin

3. 绝对单位

3.1 px

3.2 in

3.3 pt、pc

3.4 cm、mm

4. 其它单位

4.1 频率单位

4.2 时间单位

4.3 分辨率单位

4.4 角度单位

---

1. 总述

在项目的开发中，我们除了高兼容性的px、%、em这几个单位之外，我们还可以用CSS3新增的计量单位rem、vh、vw、vm等来让我们的页面具有更加良好的响应式，以便适配更多分辨率的终端。

注：本文参考整理自【一文读懂 CSS 单位 - 前端充电宝】，对文章内容结合所学做出整理和修改。

2. 相对单位

相对单位指的是那些长度相对于另一个长度的定位。

2.1 %

1 % = 参照值的1%

在不同属性下的百分比，参照值不一定是父标签，也不一定是对应的宽高，具体值如下：

• 盒子模型

  • width、max-width、min-width：相对于父元素的宽

  • height、max-height、min-height：相对于父元素的高

  • padding、margin：水平则相对于宽，垂直则相对于高

• 文本

  • font-size：相对于父元素的font-size

  • line-height：相对于font-size

  • vertical-align：相对于line-height

  • text-indent：水平则相对于宽，垂直则相对于高

• 定位：top、bottom、left、right

  • 相对定位：相对于父元素

  • 绝对定位：相对于离他最近的相对/绝对/固定的元素。

  • 固定定位：相对于视窗（viewport）

• 变化：translate、transform-origin

  • 横轴X：根据容器的宽

  • 纵轴Y：根据容器的高

  • 竖轴Z：不接受百分比

使用：百分比常常在响应式布局中使用，但不建议每个属性都使用百分比单位，会导致页面布局变得复杂难调

2.2 ex、ch

1 ex = 当前字体中小写字母x的高度

1 ch = 当前字体中数字0的宽度（约等于字体的平均字符宽度）

使用：当我们想要指定一个容器内只能放入指定个字符时，我们可以使用width: * ch;来指定容器的宽度

2.3 em、rem

1em = 1 当前元素的字体大小（如果没有，则继承父级元素的字体大小（默认为16px））

1 rem = 1 HTML根元素的字体大小

em使用：em由于相对的是当前元素，我们一般不全局使用em，而是使用text-indent: 2em;来对文本进行缩进。

rem使用：我们一般设置html {font-size: 62.5%; }让根元素的字体大小为16px * 62.5% = 10px，使1 rem = 10 px

2.4 vw、vh、vmax、vmin

1 vw = 视口宽度的百分之一

1 vh = 视口高度的百分之一

1 vmax = 1 vw 或 1vh 中较大的值

1 vmin = 1 vw 或 1vh 中较小的值

使用：当我们需要让元素占满屏幕时，可以使用vw和vh，父元素固定位页面的宽高，比使用百分比时的父元素更加容易确定。

3. 绝对单位

绝对单位指的是那些长度固定、不受其他元素影响的单位。

换算：1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px

3.1 px

1 px (Pixels) = 1 像素。

注：具体计算方式可以参考本系列上一篇推文：CSS面试题-像素 - CSDN

注意：这里的像素并不严格等于1设备像素，而是相当于1 * 设备像素比个像素

3.2 in

1 in (Inches，英寸) = 96px

3.3 pt、pc

1 pc (Picas，派卡) = 12 pt (Point，点) = 16 px ；3 pt = 4 px；

使用：当制作想要输出印刷产品的前端系统时，需要使用这种单位，可以让页面的打印不受屏幕显示器分辨率的影响。

3.4 cm、mm

1 cm (Centimeters，厘米) = 10 mm (Millimeters，毫米) = 37.8 px

4. 其它单位

4.1 频率单位

1 kHz(千赫兹) = 1000 Hz(赫兹)

使用：在听/说的相关级联样式表中，可以通过pitch: 138Hz;修改语音阅读文本的音调（低频率-低音；高频率-高音）。

注意：频率单位不区分大小写，但是写0时不能省略单位。

4.2 时间单位

1 s(秒) = 1000 ms(毫秒)

使用：在过渡动画中，用于设置持续时间或延迟时间。

4.3 分辨率单位

• 1dppx = 96 dpi

• 1 dpcm ≈ 2.54dpi；1 dpi ≈ 0.39 dpcm

dpi ：dots per inch，表示每英寸包含的点的数量。一般为72或96（大于192的为高分屏）。

ddpx ：dots per pixel，表示每像素包含的点的数量。CSS固定比率1:96，所以1 ddpx = 96 dpi

dpcm ： dots per centimeter，表示每厘米包含的点的数量。

使用：在媒体查询中，用于设置设备宽度或高度使用。

4.4 角度单位

90 deg(Degress，度，一个圆360度) = 100 grad(Gradians，梯度，一个圆400梯度) = 0.25 turn(Turns，圈/转，一个圆1圈/转) = 1.57 rad(Radians，弧度，一个圆2π弧度)

使用：在CSS使用选择或发生线性渐变时，我们经常使用角度值