很多css属性的取值都可以是百分比值。虽然形式上来说，百分比值都是数字后跟%的形式(注意数字和%之间不可以有空格)，但在不同的使用场合下，其意义会有很多不同。因此，百分比值可以说包含了相当丰富的内容。
百分比值是相对值
要理解诸如100%这样的百分比值，其关键点是要明白，百分比是一定有其对应的参照值的。也就是说，百分比值是一种相对值，任何时候要分析它的效果，都需要正确找到它的参照。
一个css属性值从定义到最终实际使用，是存在一个过程的。这其中涉及到Specified Values(指定值)、Computed Values(计算值)、 Used Values(使用值)、Actual Values(实际值)等概念，可以想见到，百分比值实际会在这个过程中，根据它的参照计算转化为一个绝对值(比如100px)，然后再被应用。这就是百分比值的意义。
更多关于css属性值的处理过程的信息，可以查看Value Processing。
百分比值的作用？
简单地说，就是可变性。这可以衍生出自适应、响应式等看起来很有用的东西。
比如说，一个固定宽高的盒子，然后希望盒子内有一个绝对定位的，宽高和盒子一样的盖板(就这样称呼吧…)，下面这样的写法会很合适：
.box{position:relative;width:100px;height:100px;}
.box_cover{position:absolute;width:100%;height:100%;left:0;top:0;}
这里使用百分比值的好处的是，如果需要修改盒子的尺寸，只需要修改盒子的宽高，而盖板会自动保持和盒子的尺寸一致。