很多css属性的取值都可以是百分比值。虽然形式上来说，百分比值都是数字后跟%的形式（注意数字和%之间不可以有空格），但在不同的使用场合下，其意义会有很多不同。因此，百分比值可以说包含了相当丰富的内容。
百分比值是相对值
要理解诸如100%这样的百分比值，其关键点是要明白，百分比是一定有其对应的参照值的。也就是说，百分比值是一种相对值，任何时候要分析它的效果，都需要正确找到它的参照。
一个css属性值从定义到最终实际使用，是存在一个过程的。这其中涉及到Specified Values（指定值）、Computed Values（计算值）、 Used Values（使用值）、Actual Values（实际值）等概念，可以想见到，百分比值实际会在这个过程中，根据它的参照计算转化为一个绝对值（比如100px），然后再被应用。这就是百分比值的意义。
更多关于css属性值的处理过程的信息，可以查看Value Processing。
百分比值的作用？
简单地说，就是可变性。这可以衍生出自适应、响应式等看起来很有用的东西。
比如说，一个固定宽高的盒子，然后希望盒子内有一个绝对定位的，宽高和盒子一样的盖板（就这样称呼吧...），下面这样的写法会很合适：
这里使用百分比值的好处的是，如果需要修改盒子的尺寸，只需要修改盒子的宽高，而盖板会自动保持和盒子的尺寸一致。
再一个例子是Bootstrap的栅格系统：
可以看到，栅格系统里会用到百分比值来实现确切的对空间的划分。百分比值是相对的，自适应的，因此栅格系统可以很好地用于响应式设计。
可用百分比值的常见css属性
width & height
宽和高在使用百分比值时，其参照都是元素的包含块（Containing Block，详情）。width参照包含块的宽度，height参照包含块的高度。在大部分情况下，包含块就是父元素的内容区（盒模型里的content）。
我以前写过width:100%; height:100%;这样的代码来实现尺寸和父元素一致。但我发现有时候宽度是符合意思（100%）的，但高度却没有效果。请看下面这个示例：
可以看到，直接父元素（包含块）是否有明确的高度定义，会影响height为百分比值时的结果。
新闻热点
疑难解答
