ch应该是一个鲜为人知的计算单位。
ch是一个相对于数字0的大小。
1ch 就是数字 0 的宽度。
比如定义一个3ch的宽度，那么久只能装下3个0。
重复一次：1ch 等于一个 0 的 宽度！宽度！宽度！
注意，是0的宽度，和0的高度无关。
比如
可以看到，是一个正方形，因为ch只等于0的宽度。
ch还有另一个规则：
ch 是一个相对单位，所谓相对，意思是 ch 会根据当前容器的 ****font-size**** 变化而变化。
如果字体不是等宽字体，这时的ch看起来就不止是一个英文字母的宽度了。
比如
可以看到，16个小写L，并没有超出8ch。
同时，如果容器中的内容是中英文结合的话，用ch做长度单也不是那么好使。
上面用到的几个CSS属性，是用来控制如果内容超出容器，就用省略号显示超出的部分。 【CSS】省略号
ch一般很少用得上，因为使用规则可能稍微有点复杂，而且通常需要 js 配合使用。
一般都会用em来代替ch~
px是像素点（Pixel）
em是当前元素所使用的字体的大写英文字母M的宽度，之所以指定是M，是因为在比例字体中每个字母的宽度是不相等的（比如W和i的宽度就差别很大），而在等宽字体（比如汉字）中，每个字符的宽度是相等的，所以em就是字符的宽度（或者说是汉字宽度的一半）
rem则是页面根元素的字体宽度（r就是root，根），其他解释同上
px是一个绝对长度单位，就是说指定一个元素的宽度是100px，那么它的宽就固定为100像素；而em则是一个相对长度单位，比如说一个元素的宽度是4em，而这个元素的字体宽度为12px，则这个元素的实际宽度就是48px，而如果把这个元素的字体大小改为16px，则这个元素的实际宽度也自动变为64px；至于rem，是为了让这个页面所有使用rem作为长度单位的元素都可以随页面根元素（通常是指html或body）的字体大小而自动调整，这样的话只需要改变根元素的字体大小，就可以实现改变整个页面外观的目的，通常用于响应式页面布局。
作为一个小前端，最基本的布局应该已经是手到擒来的事情，但是在布局过程中，你是不是经常就使用px、%或者rem？其他的呢？你是否又熟悉？下面就为同学们说一下css中可能会遇到的单位。
首先就从熟悉的开始：
第一种：px
px（像素）是CSS中最为常用的一种单位，传统上一个像素对应计算机屏幕上的一个点，对于高清屏则对应更多。
第二种：%
百分比也较为常用。其中对font-size设置百分比值时，是以浏览器默认字体大小16px为参照计算的。
第三种：em
em是一种计算方式为相对于父元素的字体大小的单位，1em等于父元素设置的字体大小，如果父元素没有设置字体大小，则继续往父元素查找，直到有设置大小的，若都没有设置大小，则使用浏览器默认大小。
