其他分享
首页 > 其他分享> > css 行高

css 行高

作者:互联网

文本四线,从上到下分别是顶线,中线,基线,底线。

 

1. 行高:是指上下文本行的基线见的垂直距离,即途中两条红线间的垂直距离。(途中上下两条同色线间的垂直距离)

2. 行距:是指一行底线到下一行顶线的垂直距离。

3.半行距:行距的一半

 

1.内容区:

  文本行中的每一个元素都会生成一个内容区,这个由字体的大小确定,但高度并不是字体大小,内容区比字体大小大。这个内容区则会生成一个行内框。

  如果不存在其他因素,这个行内框就完全等于该元素的内容区。由line-height产生的行间距就是影响行内框高度的因素之一

2.行内框:行内框是一个浏览器渲染模型中的一个概念。无法显示出来。行内框默认等于内容区域。将line-height的计算值减去font-size的计算值,就是总行距。这个值可能是负值,任何将行间距/2 分别应用到内容区的顶部和底部,其结果就是该元素的行内框

3.行框:行框是指本行的一个虚拟的矩形框。是浏览器渲染模式中的一个概念,并没有实际显示。默认情况下行框高度等于本行内所有元素中行内框最大的值(一行上垂直对齐时以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐,最终计算行框的高度)。当有多行内容时,每行都会有自己的行框。

 

结论:感觉上面的概念不太符合实际情况。

个人总结

  1.内容区大小由字体大小决定,但大于字体大小。默认情况下,行框就等于内容区的高度和位置,

  2.如果指定了行高,如果行高大于字体大小,那么行框高度就等于行高高度,字体和行框中间对齐

   如果行高小于字体大小,那么行框高度会缩小,但不会等于行高,行框也不会和字体中间对齐。

   所以设置行高时,尽量让行高大于字体 大小。

  3.行框的高度决定父元素的高度(父元素未设置高度时)

  4.行高是可以被继承的。只有因子值会被子元素继承换算前的因子,其他会继承换算后的像素

 

  行高最常用的功能:单行文本垂直居中(设置行高为元素高度)

 

实例

<body >
    <div id="d1">
       <span id="s1">中文English</span>
    </div>
</body>

css代码1,未指定行高

#d1 {
    background: pink;
    width:300px;
    margin:100px auto;
}
#s1 {
    background: deeppink;
    font-size: 40px;
    /* line-height: 80px; */
}

 

 

 

css代码2, 行高大于字体大小

#d1 {
    background: pink;
    width:300px;
    margin:100px auto;
}
#s1 {
    background: deeppink;
    font-size: 40px;
    line-height: 80px;
}

 

 

 css代码3,行高小于字体大小(或许行框底部与底线对齐?)

#d1 {
    background: pink;
    width:300px;
    margin:100px auto;
}
#s1 {
    background: deeppink;
    font-size: 40px;
    line-height: 20px;
}

 

 

 

 

 

 

 

 

  

 

标签:行框,行内,字体大小,高度,行高,background,css
来源: https://www.cnblogs.com/gaoBlog/p/16687237.html