标准单位

• px

  • 1px 即 一个像素
  • 屏幕中显示最小的一个点，因分辨率不同而不同

• %

  • 百分比

  • 除了宽高，其他属性最好少用，因为规则会变(如下)

    • width/height/font-size 用%

      • 是相对“父元素相同属性”来计算

    • line-height 用%

      • 是相对“当前元素的font-size”来计算

    • vartical-align

      • 是相对“当前元素的line-height“来计算

• em(重点)

  • 1em 即

    • 当前元素的“字体大小”
    • 以 px为单位的 font-size值

  • 如果当前元素没定义px，则继承父元素px值

  • 如果祖上都没定义px，则取浏览器默认16px

  • 技巧

    • 首行缩进

      text-indent: 2em;
      

    • 作为全局统一单位

      body {
        font-size: 62.5%;
      }
      

      • 这样1em就从 16px 变成 10px

      • 为什么要这样设置？

        • 因为脑子里想的是px，这样设置后，直接除以10，就能变成em(而不是除16)

      • 注意

        • 如果子元素font-size也用em
        • 则宽高的em值也要基于此字体em来二次计算

    • 作为全局字体单位

      • 只要改变根元素字体大小，即可全部放大/缩小
      • 在跨平台网站开发中有优势

• rem(衍生)

  • 1rem 即 根元素(html元素) 的字体大小
  • CSS3新引进，除IE8以外都支持
  • 移动端最常见