line-height的继承性，height line-height 背景填充的方式

原創

2020-02-21 01:51

一定义：line-height 属性设置行间的距离（行高）。
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

注意数字可以直接被继承，然后在计算行高，而百分比是先计算出行高，在以px继承

二行高可以继承，但是不同的元素继承的特点稍微有点不同

.one {
        height: 300px ;
        width: 300px;
        border: 50px solid black ;
        line-height: 150px;
    }
<div class="one">
    <div class="two">这个其实很简单</div>
</div>

a 对于浮动元素 position ：absolute fixed ; display :inline-block 生成的行内块元素，可以直接继承行高，内容区是由行高撑开的（在没有设置宽高的情况下），

浮动元素
.two {
float: left;
background-color: pink;
}

或者定位 position ：absolute fixed

.two {
        position: fixed;
        position: absolute;
        background-color: pink;
    }

或者display :inline-block

.two {
        display: inline-block;
        background-color: pink;
    }

b 对于块级元素也是一样的，可以直接继承行高，内容区是由行高撑开的（在没有设置宽高的情况下），只不过块级元素可以“继承”父元素的宽度。（在没有设置宽高的情况下）

c 对于行内元素其实也是可以继承行高的但是内容区却只有内容撑开，设置宽高都是没有效果的，背景同样不会填充line-height区域。

    .two {
        display: inline;
        background-color: pink;

    }

三 height line-height 和背景填充的关系，在 .two 盒子加一个 height: 50px; 属性之后，

height: 50px;

对于所有元素（浮动元素 position ：absolute fixed ; display :inline-block ；生成的行内块元素；块级元素），可以直接继承行高，~~内容区是由行高撑开的~~ ，在设置宽高的情况下，内容是由高度决定的，这个时候，背景填充（content+padding+boeder 此时只有content(width+height)区域）
内容是由height撑开的 line-height只能影响行框内的元素布局，并不会撑开盒子！
*按优先级来理解的话，
1 如果一个盒子想被撑开，在没有设置height line-height 的时候，盒子会被内容撑开，
2 在没有设置 height 但是设置了 line-height的时候，盒子会被line-height撑开（其实盒子的高度本来就不是被内容撑开的，本来就是被line-height或者height撑开的，详情参见鑫神博客http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/）
3 在设置了height之后，其他的都是白扯，line-height只会影响布局，背景不会填充到line-height范围内，只会填充盒模型 content + padding + border