css 百分比继承关系的探讨
引入：近日在回顾css基础的时候发现了一个有趣的问题，就是css在继承百分比类属性的时候是继承百分比后再根据父级宽高计算，还是继承父级根据百分比计算过后的绝对值。下面举一个简单的例子来描述这一个问题，如下代码，两个段落最后会缩进多少距离呢？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent { width: 1000px; background: #ccc; } .textParent { width: 800px; text-indent: 10%; } .textParent2 { width: 800px; } </style> </head> <body> <div class="parent"> 以下段落继承了'textParent'的'text-indent'，实际缩进为800px * 10% = 80px: <div class="textParent"> <p>这是段落文字，这是段落文字，这是段落文字，这是段落文字，这是段落文字，这是段落文字</p> </div> </div> <div class="parent"> 以下段落的'text-indent'来自p标签自身，实际缩进为800px * 10% = 80px: <div class="textParent2"> <p style="text-indent: 10%;">这是段落文字，这是段落文字，这是段落文字，这是段落文字，这是段落文字，这是段落文字</p> </div> </div> </body> </html>
分析： 如果是继承百分比后再根据父级宽高计算，那么第一个段落应该最后缩进：800px * 10% = 80px; 如果是继承父级根据百分比计算过后的绝对值，那么第一个段落应该最后缩进： 1000px * 10% = 100px; 由于第二个段落不存在继承，所以缩进是固定的 800px * 10% = 80px，所以我们以第二个段落作为标准就可以看到css在继承百分比属性时是采取上述何种方式了
结果： 打开浏览器可以看到上图的运行结果，说明css在继承百分比类属性时，是先继承原始百分比的声明，再根据此声明计算最后的样式。
