CSS常见单位总结 px，%，em，rem，vw，vh

• 1.px
  • px是绝对单位，不会随浏览器页面大小的变化而变化
  • px其实就是像素点，相对于自身屏幕尺寸。
• 2. %
  • 相对单位
  • % 相对于其父元素的宽高进行百分比分配，若父元素宽高改变，子元素设置了 % 则也会随之改变
• 3.vw 和 vh
  • 相对单位
  • vw 和 vh 是相对于视口宽高的单位
  • 视口就是目前能看到的整个展示内容的屏幕大小
  • vw 和 vh 只有0-100的取值，类似于 百分比 %
  • vw 和 vh 会随视口的变化而变化
• 4.em
  • em是相对单位，最终大小由计算得出
  • 计算规则是相对于其父元素预先设定好的 font-size 大小去计算的
    • 比如父元素设置了 font-size ：40px；
    • 子元素中字体大小设置为 font-size：2em；
    • 则子元素字体最终展示的大小为 40 * 2 = 80px
  • 使用em单位如果出现嵌套关系，字体大小会不断累乘
  • 如果没有特定的父元素设置 font-size 属性，则默认根据 body 标签内设置的 font-size 进行计算，默认值是16px
• 5.rem
  • rem是相对 HTML 根标签元素中设置的 font-size 大小来进行计算
  • 通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
    • 如HTML标签设置 font-size：20px；其他元素内使用了rem单位 如 width：10rem；
    • 则最终计算得出 width ：200px；（20px*10rem）