zoukankan      html  css  js  c++  java
  • line-height:150%与line-height:1.5的区别

         今天看到一篇文章,说的是CSS学习中的瓶颈,我最近也发现自己css很薄弱,写的样式总是有兼容性问题,要写很久,发现了一个问题,我从来没有用过line-height:150和line-height:1.5,都是直接用xxpx的,所以一直不知道这2者竟然有区别,长见识了。下面说下2者的区别:      

    • 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。
    • 父元素设置line-height:150%是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

        如:

    父元素设置属性:font- size:14px;line-height:1.5,child设置font-size:26px;

    那么父元素:line-height = 14px * 1.5 = 21px,子元素:line-height = 26px * 1.5 = 39px。

     

    父元素设置属性:font-size:14px;line-height:150%,child设置font-size:26px;

    那么父元素:line-height = 14px * 150% = 21px,子元素:line-height = 父元素的line-height = 21px。

     

    -----------------------------------------------------------------------------------------------------------------

    最近的自己有点浮躁,在学习的道路上任重而道远啊。。。

     

    欢迎大家来浏览我的博客,如发现我有写错的地方,欢迎交流指正。
  • 相关阅读:
    数据库(六)
    数据库(五)
    数据库(四)
    数据库(三)
    数据库(二)
    数据库
    函数 枚举和递归
    数据类型(四) 集合
    数据库基础
    特殊集合 结构体
  • 原文地址:https://www.cnblogs.com/lulu-beibei/p/6951440.html
Copyright © 2011-2022 走看看