css中的单位

/**
  单位：
  1.像素px
  一个像素就是屏幕中的一个小点，手机屏的像素大小是PC的四分之一
  2.百分比%
  子元素的宽度/高度 = 父元素的宽度/高度 * xxx%
  3.em
  em是相对于当前元素的字体大小计算的
  1em = 1 * font-size
  浏览器默认字体大小是16px，若当前元素未设置字体大小，则：1em = 16px
  当字体大小发生改变时em也随之改变，当需要设置字体相关的样式时，会经常使用em
 */
.box1 {
    width: 100px;
    height: 100px;
    background-color: #bd6e07;
}
.box2 {
    /* 1em = 16px */
    width: 1em;
    /* 高度为50px */
    height: 50%;
    background-color: #025a18;
}

效果：