CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)

像素(px)&百分比(%)

像���(Pixel)

• 长度单位，相对于显示器屏幕分辨率而言，通常在不定义显示缩放比例的情况下，1px对应显示器屏幕上的一个像素点。
• 早年的pc端展示的页面基本都用这个单位。

  百分比(%)

  • 相对长度单位，指占用的父元素宽度/高度的比例。

  • 当指定为100%时，会占据父元素的全部宽度或高度；也可以指定大于100%的数值，这时，子元素会超出父元素的边界。

    EM&REM

    这两个都是相对长度单位。区别在于：

    • EM是相对于父元素
    • REM是相对于根元素。REM中的“R”就是ROOT的意思。页面中的根元素是指html标签。

      现代浏览器通常默认字体大小是16px，所以rem/em的数值实际上都是16px的倍数。例如，当字体大小为16px时，有：

      问题在于，当使用16px做为默认大小时，12px或10px这种数值使用rem/em来表示，会在计算和书写时比较麻烦。所以通常会在css的html选择器中将字体大小进行重置。

      html{    font-size: 62.5%;}

      也就是说现在默认字体大小不再是16px，而是16px*0.625=10px。这时，在使用rem/em时，就方便多了。此时的12px就是1.2rem, 10px就是1rem，计算和书写更加方便。

      这里需要注意一点，虽然在html选择器和其他选择器中都定义了font-size属性，但是要注意区别

      html {    # 这里是重新设置根字体大小，其含义是16px*62.5%=10px，也就是说将根字体大小设置为10px;    font-size: 62.5%;}.parent {    # 这里是应用根设置的字体大小，20rem = 10px*20 = 200px    width: 20rem;    height: 20rem;    # 指定字体大小是20px    font-size: 2rem;}

      EM的缺点

      • 前面提到，EM是相对于父元素进行计算，所以当页面比较复杂时，计算EM，也就会变的复杂。

      • 究其原因，是因为其所有字体大小都相对于父元素的大小决定的，当页面有多层嵌套时，同样是定义2rem/2em，实际显示的字体大小会不同。

                          Document          html {        font-size: 62.5%;      }      .parent {        width: 600px;        height: 600px;        background-color: lightblue;      }      .item_em_1,      .item_em_2 {        font-size: 2em;        background-color: limegreen;      }      .item_rem_1,      .item_rem_2 {        font-size: 2rem;        background-color: purple;      }                          EM_AA（这里EM与REM自动大小相同）        EM_BB（这里字体相对父元素明显变大）                    REM_AA        REM_BB（这里字体与父元素相同）            

        所以在前端开发时，尽量不要使用EM！容易迷糊！

        VW&VH

        这两个单位都是相对于页面显示窗口的大小。

        • VW：视图宽度(Viewport Width),将页面显示窗口的宽度分成100份，每1vw是视图窗口宽度的1/100。
        • VH：视图高度(Viewport Height),将页面显示窗口的高度分成100份，每1vh是视图窗口高度的1/100。

          vmax&vmin

          • vmax:取当前vw,vh中的最大值
          • vmin:取当前vw,vh中的最小值

            计算

            可在CSS中使用calc进行数值的计算

            计算时，要注意±符号前后必须要有空格

            calc(100vh - 10px)calc(100vh - 10rem)