CSS的ch单位是什么鬼？如何使用ch单位？关于这个问题,我也是偶然在一个文章中遇到的，如下：“它的css宽度用了计算属性，然后乘以1ch”，这谁能受到了，rem,em,px,vw,vh,%以上单位都常见，那怕你使用cm，m这样的单位我也能看懂，你硬是勾起了我的好奇心：ch是个什么单位？

CSS的ch单位是什么鬼？如何使用ch单位？-QUI-Notes

ch知识点

然后查阅了相关文章之后，觉得这个单位有点不简单：

  •  1.ch和0的宽度有关，和高度没关系，是相对单位，0越大，ch越宽
  •  2.ch和fontSize有关，是相对单位，fontSize越大，ch越宽
  •  3.1ch可以放一个数字或一个小写英文字母

 代码实践

 另外，有文章说2ch可以放一个中文或大写英文，但是这个规则经过我测试，发现并不正确，证明如下： 

<style type="text/css">
h1{width: 4ch;background: #777;white-space: nowrap;}
</style>
<h1>000000</h1>
<h1>12345678</h1>
<h1>abcdefg</h1>
<h1>ABCDEFG</h1>
<h1>唐宋元明清</h1>

 我以4ch为宽度设置h1背景色，然后数字和小写英文规则都能验证通过，唯有大写字母和汉字规则不正确：“2ch=一个中文宽度”和2ch=一个英文大写宽度，效果如下图：

CSS的ch单位是什么鬼？如何使用ch单位？-QUI-Notes

 
 总结一下，关于ch这个css的长度单位，使用的时候要注意：用于数字和小写英文字母的时候可以很准确的限制长度，对于中文和大写字母宽度会溢出！能不用这个单位，坚决不用！