CSS中的单位

CSS中单位的形式有很多种，如常用的可能就是px(像素)

相对单位

相对单位是相对于另一个长度的长度，需要通过计算才能得出

字体相对单位是根据font-size来计算的。常见的字体相对单位有：em、rem、ex、ch

em和rem：相对于font-size属性值来计算

em是相对于自身font-size属性，当自身没有font-size时会向上查找父元素直到找到font-size属性，如果所有父元素都没有设置，会使用浏览器的默认字体尺寸

rem相对于em就简单了很多，它是根据页面的根元素(html元素)的font-size属性来计算的，没有设定该属性则使用浏览器的默认字体尺寸

ex 和 ch：是排版用的单位，大小取决于元素的font-size和font-family属性

ex 是基于所用字体中小写字母 x 的高度。如果两个字体不一样，那么ex的值不一定一样

ch 是基于所用字体中数字 0 的宽度。0 的宽度通常是字体的平均字符宽度，它是一个估计值

由于ch是一个近似等宽的单元，所以在设置容器的宽度时很有用，如要规定显示指定个数的字符串时，就可以使用

视窗相对单位是根据视窗大小来计算的。常见的视窗相对单位有vw、vh、vmax、vmin

所谓的视窗，在web端指的就是可视区域，移动端指的是布局视窗

vw：视窗宽度的百分比
vh：视窗高度的百分比
一个浏览器视窗高度是800px，那么1vh的值就是8px

vmax：视窗高度和宽度中的较大的值的百分比
vmin：视窗高度和宽度中的较小的值的百分比
一个浏览器视窗高度为500px，宽度为1200px，那么1vmin就是5px，1vmax就是12px
一个浏览器视窗高度为1000px，宽度为600px，那么1vmin就是6px，1vmax就是10px

微信小程序独有的rpx(responsive pixel)，不论大小屏幕，规定屏幕宽为750rpx，这样可以根据屏幕宽度进行自适应

绝对单位

绝对单位是一个固定的值。常见的绝对单位包括：px、pt、pc、cm、mm、in等

1in   = 25.4mm  = 2.54cm   = 6pc  = 72pt = 96px
1英寸 = 25.4厘米 = 2.54毫米 = 6派卡 = 72点 = 96像素

px表示像素，全称为Pixels，它并不严格等于显示器的物理像素，尤其在高清屏下

CSS中将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为1px

如一个“600x400”解析度的照片的长宽分别为“600px”和“400px”
照片本身的像素并不会与显示装置像素一致，而是与px单位一致
这样就可以将图像完整的与网页的其它元素排列起来

px常被称为CSS像素，是一个绝对单位，也可以视为相对单位，每1个CSS像素所代表的物理像素在不同的设备之间是变化的

CSS像素 = 物理像素 × 缩放因子

对于桌面设备，由于现在屏幕变得越来越高清，高清屏如果没有缩放，画面看起来会比较小，因此需要放大，在win10中的设置->屏幕中的"缩放与布局"可以修改该值

移动端默认情况下，会将viewport宽度设为980px(也可能是其它值)，此时跟缩放因子没有任何关系，这时的1px非常小，所有的元素都变得非常小，之所以这么做是为了尽可能完整的显示网页，然后用户通过放大缩放来查看细节

如果不希望采用默认设置，就需要设置viewport：<meta name="viewport" content="width=device-width">

将viewport宽度设为设备宽度，这里的设备宽度到底就跟缩放因子有关系了，移动设备会自动计算1in = 96px这个比例来控制缩放因子

pt表示点，全称为Point。常用于软件设计和排版印刷行业。当使用这个单位时，无论显示器的分辨率是多少，打印在纸上的结果都是一样的

如果单纯为了网页的显示，建议就使用px像素单位，如果需要输出印刷产品，就可以考虑使用pt

pc表示派卡，全称为Picas。也是印刷的术语，相当于我国新四号铅字的尺寸。1pc=12pt，1pc = 16px

cm表示厘米，全称为Centimeters。1cm = 37.8px

mm表示毫米，全称为Millimeters。1mm = 3.78px

in表示英寸，全称为Inches。1in = 96px

频率单位

CSS中的频率单位有 Hz(赫兹) 和 kHz(千赫兹) 两个，1kHz = 1000Hz

这两个单位是不区分大小写的

频率单位一般使用在听或说级联样式表中。可以用来改变一个语音的音调，低频率就是低音，高频率就是高音

当值为0时，单位对值没有影响，但是0、0Hz、0kHz是不一样的(不要直接写0)

时间单位

CSS中的时间有 s(秒) 和 ms(毫秒) 两个，1s = 1000ms

时间单位主要用于过度和动画中，用于定义持续时间或延迟时间

分辨率单位

CSS中的分辨率单位有三个：dpi、dpcm、dppx

这三个单位都是正值，不允许为负值

1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

还有一个单位是ppi，目前css还没有使用，ppi（pixels per inch）表示沿对角线每英寸长度的像素数目

分辨率单位主要用于媒体查询等操作

dpi表示每英寸包含的点的数量，全称为dots per inch，普通屏幕通常包含72或96个点，大于192dpi的屏幕被称为高分屏

@media screen and (min-resolution: 96dpi) { ... }

dpcm表示每厘米包含的点的数量，全称为dots per centimeter

@media screen and (min-resolution: 28dpcm) { ... }

dppx表示每px包含点的数量，全称为dots per pixel，由于1in = 96px，因此1dppx相当于96dpi

@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

角度单位

CSS中的角度单位有四个：deg、grad、rad、turn

一般这些角度单位用于元素的旋转操作，包括2D旋转、3D旋转等

值为正值时顺时针旋转，为负值时逆时针旋转

通常情况下，所有的角度都在0-360度之间，允许超出这个范围

除了旋转会使用角度之外，线性渐变也会经常使用角度值

background: linear-gradient(45deg, #000, #fff)

deg表示度，全称为Degress，一个圆共360度

grad表示梯度，全称为Gradians，一个圆共400梯度

rad表示弧度，全称为Radians，一个圆共2π弧度

turn表示圈，全称为Turns，一个圆共一圈

百分比单位

百分比（%）也是比较常用的单位之一，所有接受长度值的属性都可以使用百分比单位，不同属性效果可能不一样

盒模型中的百分比

width、max-width、min-width：相对于包含块的width
height、max-height、min-height：相对于包含块的height
padding、margin：水平值相对于包含块的width，垂直值相对于包含块的height

文本中的百分比

font-size：相对于父元素的font-size
line-height：相对于font-size
vertical-align：相对于line-height
text-indent：水平相对于width，垂直相对于height

定位中的百分比

position的top、right、bottom、left参照物就是包含块的同方向的width和height

static或relative，包含块一般是其父容器
absolute，包含块应该是离它最近的position为absolute 、relative 或 fixed 的祖先元素
fixed，包含块就是视窗

变换中的百分比

translateX()相对于容器的width
translateY()相对于容器的 height
transform-origin横坐标(x)相对于容器的width,纵坐标(y)相对于容器的height

translateZ()不接受百分比为单位的值