美文网首页
line-height继承规则

line-height继承规则

作者: novaDev | 来源:发表于2018-04-22 16:59 被阅读0次

经测试,line-height的继承规则如下:
ps:本文中的”数字值“指的是"1px","normal","1em","1ex","1rem"等带有确切单位的值,“缩放因子"指的是"1","1.5"这种纯数字

  • 如果父元素使用的是line-height数字值或百分比值,那么子元素将会直接继承这个数字值或百分比的计算值 (e0, e1, e2)
    • 当子元素使用数字值重写自己的line-height时,子元素的line-height将是这个新的数字值(e0)
    • 当子元素使用百分比重写自己的line-height时,子元素的line-height将是这个百分比*自己的font-size(e1)
    • 当子元素使用缩放因子重写自己的line-height时,子元素的line-height将是这个缩放因子*自己的font-size(e2)
  • 如果父元素使用line-height缩放因子,那么子元素将会直接继承这个缩放因子(子元素的line-height将是这个缩放因子*自己的font-size),并且这个缩放因子会继续向下继承 (e3)

线上例子:https://jsfiddle.net/ndNovaDev/rbbwuowy/

相关文章

  • line-height继承规则

    经测试,line-height的继承规则如下:ps:本文中的”数字值“指的是"1px","normal","1em...

  • line-height:1.5和line-height:150%

    给你个数,孩子自己算吧 line-height:1.5父元素设置line-height:1.5会直接继承给子元素...

  • WEB前端丨css — 权重、继承性、排版、float

    继承性继承性:在css有某些属性是可以继承下来,如 color,text-xxx,line-height,font...

  • CSS-- line-height继承问题

    1)具体数值,如line-height:30px,则直接继承该值2)比例,如2/1.5 则继承该比例3)百分比:如...

  • 10.CSS布局篇之line-height如何继承

    1.写具体数值,如line-height:30px;,则继承该值 2.写比例,如2或者1.5,则继承该比例 3.写...

  • line-height是怎么继承的?

    第一种:具体数值(子元素未设置具体行高数值,会自动继承父元素的行高) DEMO(下面代码子元素p继承了父元素的行高...

  • java继承规则

    父类中声明为public的方法,子类也必须声明为public 父类中声明为protected的方法,子类要么声明为...

  • line-height行高

    关于line-height line-height 语法: line-height : normal | <实数>...

  • CSS

    CSS规则 at 规则 CSS选择器 CSS选择器 继承与层叠 继承与层叠 CSS 属性 CSS 属性 CSS值 ...

  • css 零碎知识的小结

    line-height:2 根据自身元素font-size大小,算出行高。当有元素继承属性时,该元素也是如此 li...

网友评论

      本文标题:line-height继承规则

      本文链接:https://www.haomeiwen.com/subject/kdeclftx.html