css的长度单位分为两种，一种为绝对长度，一种为相对长度。
日常设计与开发中或多或少都会接触到。
前端毕竟是根据设计稿写页面，UI设计师也是按照规范去设计页面。
绝对长度px即像素pixel，它是最基础也是最常用的一个长度单位cm厘米， 1cm=37.8pxmm毫米，1mm=3.78pxin即英尺inch， 1in=2.54cm=96pxpt即点point，1pt=1/72in=1.33pxpc即派卡，1pc=12pt=16px，派卡是印刷行业的长度单位相对长度em一个字符大小，字符大小在浏览器中默认为16pxEM特点-1. em的值并不是固定的；-2. em会继承父级元素的字体大小。
所以我们在写CSS的时候，需要注意两点：-1. body选择器中声明Font-size=62.5%；-2. 将你的原来的px数值除以10，然后换上em作为单位；-3. 重新计算那些被放大的字体的em数值。
避免字体大小的重复声明。
避免1.2 * 1.2= 1.44的现象，比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
remrem是CSS3新增的一个相对单位（root em，根em）, 相对于根元素HTML的字体大小。
这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。
简单点说就是根em.百分比%百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小关于包含块（containing block）的概念，不能简单地理解成是父元素。
如果是静态定位和相对定位，包含块一般就是其父元素。
如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素，它的包含块是视口（viewport）vh视口高度，默认为视口高度的1%vw视口宽度，默认为视口宽度的1% <div class="left">left</div> <div class="right">right</div> <style> * { padding: 0; margin: 0 } .left { float: left; width: 50vw; height: 20vh; background-color: orange; text-align: center; line-height: 20vh; font-size: 3rem } .right { float: right; width: 50vw; height: 20vh; background-color: red; text-align: center; line-height: 20vh; font-size: 3rem }</style>vmin布局视口高度和宽度之中值较小的那个的 1/100vmax布局视口高度和宽度之中值较大的那个的 1/100比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
vmax相对于视口的宽度或高度中较大的那个。
其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。
其中最小的那个被均分为100单位的vmin。
frgrid布局中利用的一个长度单位。
在gird布局中，我们经常会利用fr来进行计算 <div class="grid"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> <div class="column">5</div> <div class="column">6</div> </div> <style type="text/css"> * { margin: 0px; padding: 0px; } .grid { height:300px; width: 1000px; background: #f1f1f1; margin: 20px auto; overflow: auto; display: grid; grid-template-columns: 100px repeat(5, 1fr); grid-column-gap: 10px; } .column { background: orange; } </style>当然也有小程序中的rpx，相对屏幕自适应rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。