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