Bootstrap

line-height取值方式以及它的继承

1.height区别

heigh是写死的高度,line-height是一行的高度,与font-size有关,下面是一个案例

  <div class="div">
        翻一本旧书,里面一枚书签滑落在地。<br>
        见上面有几行小字,<br>
        只为了亿万光年里的那一刹那……<br>
        我与你相聚与你别离,<br>
        完成了上帝所做的一首诗
</div>

  .div{
            height: 200px;
            width: 200px;
            background-color: pink;
  }

 

 接下来我们使用line-height:  line-height: 50px;

   .div{
            width: 200px;
            background-color: pink;
            line-height: 50px;
        }

可以看见,没有写盒子的height,盒子会被行高撑开,一行是50px,如果设置了height,则文字会溢出。

2.取值方式

 除了length,也就是直接写px值的方式不会继承,写的是多少就是多少,其他的方式都会继承,normal和纯数字是继承数字,nomal继承1.2,浏览器的默认值,inherit是继承父元素,百分比是继承的计算结果,而不是这个百分比

它们的计算方式是自身的font-size与数字的乘积

;