开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第24天，点击查看活动详情

前言

在我们设置css表示长度的属性值时后面需要带单位，比如width,maring等，css中单位有好多种，每种单位的含义不同，今天我们就来看一下它们的不同。 CSS单位分为两类相对单位跟绝对单位。
相对单位：相对于某一长度去指定长度，相对长度在不同的分辨率表示的实际宽度不一样，所以相对单位非常适用来做响应式。
绝对单位：设置的长度是固定的，不会随着设备、分辨率改变而发生变化。

相对单位

vw:相对页面窗口宽度的单位，1vw表示整体窗口宽度的1%，所以100vw代表的就是页面窗口宽度。
vh:相对页面窗口高度的单位，1vh表示高度的1%，这里面的高度跟上面的宽度都是视图高度跟宽度。
vmax:相对vw和vh中最大的那个单位。
vmin:相对vw和vh中最小的那个单位。

    .box {
      width: 50vw;
      height: 50vh;
      background: orange;
    }

9EIJ}LGN9BDIMARTR8{YZ68.png 利用这两个单位我们就能很轻松做出响应式的页面，效果要比百分比要好。

em:相对元素字符大小的单位，因为浏览器默认字体大小是16px，所以一般1em=16px,如果我们想要改变可以设置一下对应元素字体大小，1em会跟着变化。

   .box {
      width: 1em;
      height: 1em;
      font-size: 20px;
      background: pink;
    }
    .box1 {
      width: 1em;
      height: 1em;
      font-size: 50px;
      background: orange;
    }

rem:相对于根元素字体大小的单位，注意与em的区别，em是针对单个元素而言，rem是根元素html。默认1rem=16px,如果我们想要改变1rem大小就可以通过设置html种font-size大小。

    html{
      font-size: 100px;
    }
    .box {
      width: 1rem;
      height: 1rem;
     ...
    }
    .box1 {
      width: 1rem;
      height: 1rem;
     ...
    }

GS(32AG`N(JI90X07DYPEO4.png

ch:相对于数字0的宽度。
ex:相对于小写x的高度。ex和ch用的较少，我们了解即可。

绝对单位

px:像素单位，这也是我们日常中常用的单位，代表逻辑像素。
pt:镑单位，是用于印刷字体的单位，1pt=1/72英寸。
cm:厘米 mm:毫米 in:英寸，这三个就是我们日常中见到的长度单位。

   .box {
      width: 10px;
      height: 10px;
      background: pink;
    }
    .box1 {
      width: 10pt;
      height: 10pt;
      background: orange;
    }
    .box2 {
      width: 1in;
      height: 1in;
      background: skyblue;
    }

总结

学习这些单位，那么下次当我们设置长度单位时就要考虑下用哪种单位，如果想要做成响应式的一定要记得用相对单位。

CSS详解——单位

前言

相对单位

绝对单位

总结