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在继承百分比类属性时，是先继承原始百分比的声明，再根据此声明计算最后的样式。

来源：https://www.cnblogs.com/p-l-u-m/p/11314254.html

标签

css

百分比

css样式