css基础知识复习（8）之css的值和单位

今天来了解css的值和单位。在css中，很多的属性值都是通过数字+单位的形式展现出来的。比如字体大小，盒子大小等。今天挨个学习一下，我个人觉得这一部分有点枯燥。但学习知识嘛，总会有无聊的时候，你说是吧。

长度和单位

1. pixels
   像素单位。我觉得这是前端人写css代码中用的最多的长度单位。是一种绝对单位，1px就是1像素。无论其它的怎么变化，它都不变。以字体大小来举例说明它的用法。

   div{
      font-size: 18px;
    }

2. em
   当前标签下字体的大小。比如你现在元素下字体的大小为16px。那么1em就等于16px；
   这个单位用起来坑比较多，需要你明确知道自己想要的大小和当前标签下字体的大小。
3. rem
   1rem等于根元素下的字体大小。它和当前标签下的字体大小无关，所以你可以放心的用它来做单位。很多时候在移动端的适配，都是通过它来完成的。
4. 百分比
   给一个标签设定百分比时，它的长度或者宽度是相对于父元素的高度的百分比。字体大小同样是对于父元素字体大小的。
5. vw、vh
   分别是视口宽度的1/100和视口高度的1/100。对于移动端适配，现在用的也比较多。
   另外，还有以下单位，不常用。
   mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
   pt, pc: 点（Points (1/72 of an inch)）， 十二点活字（ picas (12 points.)）
   对于初学者，这个阶段掌握好px就可以，逐渐学习使用百分比。其它的可以到基础掌握的比较好的时候再使用。