image.png
    背景图位于位于盒子中心，不平铺，pink被覆盖了。
    image.png
    占原位，相对定位不脱标，任处于标准流，任是行内元素，设置宽高无效。
    百分比会把右侧滚动条计算在内
    image.png
    vw适配原理
    目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
    vw单位尺寸
    1. 确定设计稿对应的vw尺寸 （1/100视口宽度）
    Ø 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
    2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
    vh适配原理

    目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
    vh单位尺寸

    1. 确定设计稿对应的vh尺寸 （1/100视口高度）

      Ø 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）

    2. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

      开发中，会不会vw和vh混用呢？
      Ø 不会。
      Ø vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形