line-height继承和padding的参考值

原创 791617623 随笔 css问题 287阅读 2017-06-26 07:25:59 举报
  1. line-height 行高属性 控制行与行之间的间距
    这个属性大家应该很熟悉,毕竟太常用了但是你真的会用吗?
    比如line-height:120% 和 line-heihgt:1.2 和line-height:1.2em 之间的区别

    通常设置行高的方式有以下几种

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

    上面的区别主要在于line-height的继承

    1. normal,父、子元素的行高由浏览器分别计算得到。
    2. number,父、子元素根据各自的 font-size * number 计算得到行高。
    3. length(带有 css 单位,如 em,px 等),子元素直接继承父元素的行高。
    4. %,子元素直接继承父元素的行高,父元素的行高根据自己的 font-size 计算得到。

    因此想要line-height随着font-size缩放 早好采用数值

    2 padding/margin
    偶然看到的代码
    div{
    padding-top: 70%;
    height: 0px;
    background:url(.....)
    }
    后来查了查资料。。。。
    原来 当padding/margin取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!
    在移动端的站位高度可以通过父元素的宽度计算了,之前都是用rem的我。。。。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复