CSS数值与单位-CFANZ编程社区

. em

. rem（root em）

. px

长度单位像素

百分比 %

「通过实例代码展示em rem 百分数的区别」

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .son {
      border: 1px solid red;
      color: green;
    }
    .father {
      border: 2px solid blue;
    }

/* font-size width height为具体的数字*/ 
    div.father {
      font-size: 24px;
      width: 200px;
      height: 150px;
    }

/* 父元素的font-size width height为百分数*/ 
    /* div.father {
      font-size: 200%;
      width: 50%;
      height: 50%;
    } */
    
    /*1. em */
    div.son {
      font-size: 2em;
      height: 2em;
      width: 2em;
    }

    /* 2. 百分比  */
    /* div.son {
      font-size: 200%;
      height: 200%;
      width: 200%;
    } */
     

   /*  3. rem   */
   /*  div.son {
      font-size: 2rem;
      width: 2rem;
      height: 2rem
    } */

  </style>
</head>
<body>
  <div class="father">爸爸
    <div class="son">儿子</div>
  </div>
</body>
</html>

当父元素的『font-size』『height』『width』具体大小数值为「24px 150px 200px」

相对子元素「div.son」的对应的值单位分别是下面三个值：

div.son {
      font-size: 2em;
      height: 2em;
      width: 2em;
    }

font-size 48px
height 96px
width 96px

百分数
font-size 48px
height 300px
width 400px

div.son {
      font-size: 200%;
      height: 200%;
      width: 200%;
    }

rem
font-size 32px
height 32px
width 32px

div.son {
      font-size: 2rem;
      width: 2rem;
      height: 2rem
    }

当父元素的『font-size』『height』『width』具体值为给定百分数,「200%」「50%」「50%」

相对子元素「div.son」的对应的值单位分别是下面三个值：

div.son {
      font-size: 2em;
      height: 2em;
      width: 2em;
    }

font-size 64px
height 128px
width 128px

百分数

div.son {
      font-size: 200%;
      height: 200%;
      width: 200%;
    }

font-size 64px

div.son {
      font-size: 2rem;
      width: 2rem;
      height: 2rem
    }

font-size 32px
height 32px
width 32px

. 视窗单位(viewport) vw vh

<div class="test" style="border: 1px solid #000; width: 50vw; height: 50vh;">
</div>

效果

无单位的数字

当前值得单位的大小为「零」可以不带单位

line-height

参考：

MDN-css数值和单位