css中的单位

首先是一些“老”单位，也就是我们经常看见的单位：

探索心得：

   1.上面除了%和em，都是固定单位

   2.%:百分比是相对于父亲元素的大小.还有box-sizing会影响百分比的计算

    

  3.em:首先得知道浏览器的默认字体大小：font-size：16px 

        第二：em其实跟百分比很像，但是em对照的只有字体大小，不像百分比，长度对长度，宽度对宽度，字体对字体等，em只相对于字体

        其实em很简单，em先参照自己的font-size，如果自己有设置，对于非字体：1em等于自己的font-size，对于本身字体：1em等于父级font-size，如果没有，就相对于父级元素，1em等于父级font-size

       

新的单位：

     1.rem：这个单位的r是root（根），也就是说，用了这个单位，该属性的大小是相对于html元素的font-size的大小。

      2.vh和vw：viewport height和viewport width，也就是英语名称，视口的高度和宽度，视口平均分成100份，所以整个屏幕高度和宽度就是100vh和100vw，比如grid圣杯布局中，要设置最小高度希望是一个屏幕，就用min-height：100vh

     3.vmin和vmax：viewport min和viewport max，视口长度>视口宽度：vmin就是视口宽度（100vmin等于视口宽度） vmax就是视口长度（100vmax等于视口长度），反之

     4.ch：数字“0”的宽度，也就是让该长度为0的宽度    1ch等于0的宽度

     5:ex: 相对于字符“x”的高度。通常为字体高度的一半      1ex等于x字符的高度

   参照文章：https://www.w3cplus.com/css/px-to-em                

                    https://blog.csdn.net/MessageBox_/article/details/82492153