美文网首页
line-height理解

line-height理解

作者: shameyou | 来源:发表于2016-12-22 15:57 被阅读80次

    1.line-height含义

    两行文字基线之间的高度距离

    2.line-height属性值

    2.1简介(normal-number-length-percent-inherit)

    .1 normal 默认,跟着浏览器走,且与元素字体关联
    .2 number 行高=当前字体尺寸*数字

    根据当前元素的font-size大小计算:假设文字大小font-size为20像素,则实际的行高像素值:line-height=1.5*20px=30px;

    .3 length 长度值,固定或相对单位皆可
    .4 percent 行高=当前字体尺寸*百分比

    相对于设置了该line-height属性的元素的font-size大小计算
    假设:line-height=150%;文字大小为20px,则行高line-height=150%*20=30px;

    .5 inherit 从父元素继承行高。IE8+.

    例如:input框等元素默认行高是normal,使用inherit可让文本框样式可控性更强

    2.2 使用百分比、em与数值之间的差别

    计算无差别

    line-height:1.5. 所有可继承元素根据font-size重计算行高
    line-height:150%/1.5em. 当前元素根据font-size计算行高,继承给下面的元素.(父级元素计算行高后继承给子元素)

    推荐做法:使用数值.

    2.3 body全局数值行高使用经验

    body{font-size:14px; line-height:?}

    建议:匹配20像素(body默认字体*line-height=20px)的使用,利于心算

    line-height=20px/14px=1.42857(14……)

    因为chrome浏览器高度匹配出19px,所以使用1.4286

    body{font-size:14px; line-height:1.4286;}
    缩写形式:body{font-size:14px/1.4286 'microsoft yahei'}

    3.line-height与图片表现

    1.行高不会影响图片占据的高度

    行高和图文混排

    图片会和文字基线baseline对齐 ,所以图片下会有缝隙现象存在。
    即使没有文字,图片下边缘也还会有空隙。
    why?
    **“隐匿文本节点” ** 看不见的文字,但实际上是不存在的
    line-height会影响容器高度

    2.消除图片底部间隙的3种方式

    1.图片块状化 img {display:block;}

    2.图片底线对齐 img {vertical-align:bottom;}

    3.line-height足够小-基线位置上移 .box {line-height:0;}

    小图片和大文字 基本上高度受行高控制

    4.行高的实际运用

    大小不固定的图片,多行文字垂直居中

    4.1 图片水平垂直居中

    IE8+ .box { line-height:300px; text-align:cneter;} .box>img {vertical-align:middle}

    使用middle后,实际上是不能完全垂直居中。基线向上1/2x高度。不同字体在四线中表现不会完全相同,有下沉的和偏上的。

    4.2多行文本实现水平垂直居中

    IE8+ .box{line-height:250px; text-align:center;} .box>.text { display:inline-block; line-height:normal; text-align:left; vertical-align:middle; max-width:100%; }
    多行文字水平垂直居中实现的原理上面图片实现的一样,区别在于文本所在的容器的display水平转换成和图片一样,也就是inline-block,以及重置外部所继承的text-align和vertical-align的值。

    4.3 代替height,避免IE6/7下的haslayout

    在ie6/7下设置高度,会产生haslayout,冲破父元素的高度。

    在ie6/7下设置高度的正确写法:
    height:36px;
    line-height:36px;

    错误写法:
    {height:36px; line-height:36px;} 其中的height已经多余了

    慕课网-张鑫旭

    相关文章

      网友评论

          本文标题:line-height理解

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