• CSS之line-height的作用


    一、line-height

    line-height属性用于设置行间的距离(行高),例如文本。对于块级元素来说,它指定元素中线框的最小高度,对于未被替换的内联元素来说,line-height没有影响,如button或者其他input元素。(原文未提到,对于部分替代元素,line-height依然可以影响元素的样式布局)。

    行间距的尺寸分配一般是line-height与font-size的计算值只差氛围两半,分别加到一个文本行内容的顶部和底部,可以包含这些内容(文本+文本顶部+文本底部)的最小框就是行框(line-box)

    二、可能有的值

    1.normol---默认值,设置合理的行间距(可自动调整行间距)

    2.number---设置数字,此数字会与当前的字体尺寸相乘来设置行间距(这个可实现行间距永远等比例适应字体高度)

    3.length---设置固定的行间距(将行间距设置为固定尺寸,无法随字体高度变化而变化,单位可以是px,em)

    4.%---基于当前字体尺寸的百分比行间距(与字体高度等比例调整行间距)

    5.inhert---规定应该从父元素继承line-height属性的值。

    备注:行间距自动适应行高的方式,最好用的是采用number数值的方式

    三、line-height的作用

    首先,设置了line-height的行框line-box,具有的特性:

    垂直居中:由定义可知,line-height是通过line-box行框来体现,line-box所包含的内容应为“文本+文本顶部+文本底部”,其中,文本顶部和文本地鼠是line-height与font-size差值得一半,所以,line-box与文本共用中基线,这也就是行高的垂直居中性。

    import!

    单行文字的垂直居中对齐,将line-height属性设置为所需要的行框高度,即line-height=height

    多行文字的垂直居中对齐,若容器高度已知,也可直接通过设置上下padding相等就可以,但是当容器高度未知时,需要借助line-height来实现。需要将行框内的多行文本转化为内联元素,(设置display:inline-height),然后再单独设置内联元素的行间距,整个内联元素就在行框内垂直居中对齐了。

    备注:通过line-height设置文本垂直对齐,如果设置元素垂直对齐,需使用vertical-align:middle

    四、line-height:1.5 与150%的区别

    150%时会根据父元素的字体大小先计算出行高然后再让子元素继承,而1.5是根据子元素的字体大小动态计算出行高值让子元素继承

  • 相关阅读:
    [RN] React Native 使用 react-native-camera 过程中报错 Found react-native-camera 'mlkit' but wasn't required.`
    [RN] React Native 拍照、从相册选择、录像的实现
    10月14日站立会议
    第四周PSP &进度条
    课堂站立会议学习
    10月13号站立会议
    10月12号站立会议
    10月11号站立会议
    10月10号站立会议
    10月9号站立会议
  • 原文地址:https://www.cnblogs.com/shireyhu/p/7832335.html
Copyright © 2020-2023  润新知