CSS中的一些百分比相关调试经验分享

很多css属性的取值都可以是百分比值。虽然形式上来说，百分比值都是数字后跟%的形式（注意数字和%之间不可以有空格），但在不同的使用场合下，其意义会有很多不同。因此，百分比值可以说包含了相当丰富的内容。
百分比值是相对值

要理解诸如100%这样的百分比值，其关键点是要明白，百分比是一定有其对应的参照值的。也就是说，百分比值是一种相对值，任何时候要分析它的效果，都需要正确找到它的参照。

一个css属性值从定义到最终实际使用，是存在一个过程的。这其中涉及到Specified Values（指定值）、Computed Values（计算值）、 Used Values（使用值）、Actual Values（实际值）等概念，可以想见到，百分比值实际会在这个过程中，根据它的参照计算转化为一个绝对值（比如100px），然后再被应用。这就是百分比值的意义。

更多关于css属性值的处理过程的信息，可以查看Value Processing。
百分比值的作用？

简单地说，就是可变性。这可以衍生出自适应、响应式等看起来很有用的东西。

比如说，一个固定宽高的盒子，然后希望盒子内有一个绝对定位的，宽高和盒子一样的盖板（就这样称呼吧...），下面这样的写法会很合适：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表