目录
1. 绝对长度单位
彼此固定，不会因为其他元素的尺寸变化而变化。
px cm mm Q in pc pt
| 单位 | 名称 | 等价于 |
|---|---|---|
| px | 像素(pixels) | 典型的度量单位，很多其他长度单位直接映射成像素 |
| cm | 厘米(centimeters) | 1cm = 10mm = 96px/2.54 = 37.8px |
| mm | 毫米(millimeters) | 1mm = 0.1cm = 3.78px |
| Q | 1/4毫米(quarter-millimeters) | 1q = 1/4mm = 0.945px |
| in | 英寸(inches) | 1in = 2.54cm = 96px |
| pc | 派卡(picas) | 1pc = 12pt = 1/6in = 1/6*96px = 16px |
| pt | 点(points) | 1pt = 1/72in = =0.0139in = 1/722.54cm = 1/7296px = 1.33px |
px (pixel) 像素
px表示“绝对尺寸”（并非真正的绝对），实际上就是CSS中定义的像素（此像素与设备的物理像素有一定的区别）
利用px设置字体大小及元素宽高等比较稳定和精确
在IE下，不能适应浏览器缩放时产生的变化(影响不大，忽略)
2. 相对长度单位
指定相对于另一长度的长度。主要有：
2.1 字体相关的相对长度单位：
em rem ex ch
em
- em是相对字体长度单位。
- 如果用于font-size属性本身，则是相对于父元素的font-size。
- 若用于其他属性（width,height），则是相对于本身元素的font-size。
- 国外使用比较多；
注意：
任意浏览器的默认字体大小都是16px;
因此1em=16px=>10px = 0.625em
为了换算方便，可在body选择器中声明：font-size=62.5%这样，就使得10px = 1em;
缺点：
em是继承父元素的字体大小，每当父元素的字体大小改变时，就得重新计算。
rem
- rem是CSS3新增的一个相对字体长度单位，只相对根元素即HTML元素字体大小
html{font-size:62.5%; }
body{font-size:12px;font-size:1.2rem ;}
p{font-size:14px;font-size:1.4rem;}
- IE9/10中font缩写和伪元素中不支持rem单位
- IE9/10部分支持，IE11+、Firefox、Chrome、Safari、Opera 的主流版本都支持，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。
ex
- ex 指所用字体中小写x的高度。但不同字体x的高度可能不同。实际上，很多浏览器取em值的一半作为ex值
- ex 在实际中常用于微调
ch
- ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值得一半作为ch值
- ch 在实际中主要用于盲文排版
- 兼容性：IE8不支持
2.2 视口相关的相对长度单位：
vw: 视口高度，默认为视口高度的1%
vh : 视口宽度，默认为视口宽度的1%
vmin : 布局视口高度和宽度之中值较小的那个的 1/100
vmax : 布局视口高度和宽度之中值较大的那个的 1/100
- 视口单位中的“视口”，在桌面端，毫无疑问指的就是浏览器的可视区域；
- 但是在移动端，它指的则是Layout Viewport（布局视口）
2.3 相对于包含块的宽高或字体大小
%
百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小。
关于包含块（containing block）的概念，不能简单地理解成是父元素。
如果是静态定位和相对定位，包含块一般就是其父元素。
如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素，它的包含块是视口（viewport）。
