行高line-height的用法

2017-09-13 20:44:32来源:CSDN作者:qq_20037049人点击

分享

行高指一行文字的高度,具体来说是指两行文字间基线间的距离。在css,line-height被用来控制行与行之间的垂直距离。line-height属性会影响行内框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。所有浏览器都支持line-height属性。

1.说明:line-height属性设置行间的距离(行高),不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。line-height与font-size的计算之差(行距)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

2.line-height中顶线、中线、基线、底线的实例说明;从上到下四条线分别是顶线、中线、基线、底线,vertical-align属性中,top、middel、baseline、bottom,就是和这四条线有关。

3.line-height中行高、行距与半行距
a.行高是指上下文本行的基线间的垂直距离;
b.行距是指一行底线到下一行顶线的垂直距离;
c.半行距是行距的一半;

4.line-height中内容区、行内框、行框
a.内容区:底线和顶线包裹的区域;
b.行内框:每个行内元素会生成一个行内框,行内框是一个浏览器渲染模型中的一个概念,无法显示出来,在没有其他因素影响的时候(padding等),行内框等于内容区域,行内框等于内容区域;而设定行高时行内框不变,半行距【(行高-字体size)/2】分别增加/减少到内容区域的上下两边;
c.行框,指本行的一个虚拟的矩形框,是浏览器渲染模式中的一个概念,并没有实际显示。行框高度等于本行内所有元素中行内框最大的值(以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐,最终计算行框的高度),当有多行内容时,每行都会有自己的行内框。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台