css中父元素定义行高的单位px,em,%以及不带单位对子元素文本显示的影响-原创手记-慕课网

css中父元素定义行高的不同单位和不带单位对子元素文本显示的影响，下面先上代码和截图然后进行说明：

<!DOCTYPE html>
<html>
    <head>
        <title>居中其他方法</title>   
        <meta charset="utf-8">
        <style>
            div,
            p {
                margin: 0;
                padding: 0;
            }
            .parent {
                font-size: 10px;
                border: 1px solid #f00;
                margin: 10px;
            }
            .px-parent { line-height: 20px; }
            .em-parent { line-height: 2em; }
            .percent-parent { line-height: 200%; }
            .units-parent { line-height: 2; }
            .child { font-size: 26px; }
        </style>
    </head>
    <body>
        <div class="px-parent parent">
            <p class="px-line-height child">父元素用px定义行高</p>
            <p class="px-line-height child">px-line-height</p>
        </div>
        <div class="em-parent parent">
            <p class="em-line-height child">父元素用em定义行高</p>
            <p class="em-line-height child">em-line-height</p>
        </div>
        <div class="percent-parent parent">
            <p class="percent-line-height child">父元素用%定义行高</p>
            <p class="percent-line-height child">percent-line-height</p>
        </div>
        <div class="units-parent parent">
            <p class="units-line-height child">父元素定义行高时未加单位</p>
            <p class="units-line-height child">units-line-height</p>
        </div>
    </body>
</html>

父元素定义行高时使用不同高度对子元素文本显示效果的影响

说明：我们知道行高是可以继承的。当父元素的行高值没有带上单位时，子元素使用自己的字体尺寸并计算出行高值让子元素继承（子元素的行高=父元素中 line-height 的值 子元素的字体大小），本例中子元素的行高为 262=52px；当父元素的行高带有单位时，父元素先根据自己的字体尺寸计算出行高，让子元素继承（子元素的行高=父元素的行高），line-height: 2em 和 line-height: 200% 都表示行高为字体尺寸的二倍。

css中父元素定义行高的单位px,em,%以及不带单位对子元素文本显示的影响原创