前端常用开发单位

常用单位——px

    1.什么是像素(Pixel)?
    在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素
    例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格

    2.像素特点
    不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位)

常用单位—— 百分比

    1.什么是百分比?
    百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算
    例如父元素宽高都是200px, 设置子元素宽高是50%, 那么子元素宽高就是100px

    2.百分比特点
    2.1子元素宽度是参考父元素宽度计算的
    2.2子元素高度是参考父元素高度计算的
    2.3子元素padding无论是水平还是垂直方向都是参考父元素宽度计算的
    2.4子元素margin无论是水平还是垂直方向都是参考父元素宽度计算的
    2.5不能用百分比设置元素的border

    结论: 百分比是一个动态的单位, 会随着父元素宽高的变化而变化(相对单位)

常用单位—— em

     1.什么是em?
    em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位
    例如font-size: 12px; ,那么1em就等于12px

    2.em特点
    2.1当前元素设置了字体大小, 那么就相对于当前元素的字体大小
    2.2当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
    2.3如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小

    结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)

常用单位—— rem