css中怎么量文字的行高?行高是什么?说是基线之间的距离,怎么看别人量的是底线的距离

html-css017

css中怎么量文字的行高?行高是什么?说是基线之间的距离,怎么看别人量的是底线的距离,第1张

小时候学英文写字母的时候,有没有用过那种四条横线的英语作业本呢?其中的第三条线就是基线,也就是小写字母g上面这个小圆圈的底边所接触的那条线。

当然,如果是大写字母,或者是汉字,那么就是文字的底边就是基线了。

所以,两行文字的基线之间的距离,就是行高了。事实上,只要指定一个标准,比如文字顶边之间的距离,或者中线之间的距离,都是行高!

补充说一下:行高减去字高就是行间距了

font-size顾名思义啦,就是一个字符的尺寸。

line-height是一个行框的高,在标准浏览器中行高可以小于文本高,但在IE中最小行高为字符的高。

首先行高百分比的书写,百分比是针对字体大小进行设置的,也就是说如果你的文字大小为20px,那么100%就是20px,这个和你的需求不符合

其次,CSS当中也不能写成height/2的样子

那么,两种方案能够解决这个问题

1 改变标签的默认显示样式,然后使用vertical-align属性进行控制

<style>

.box {

width: 800px

height: 400px

border: 10px solid red

}

.demo {

float: left

display: table

width: 33%

height: 50%

border: 1px solid black

}

.demo > p {

display: table-cell

vertical-align: middle

}

</style>

<div class="box">

<div class="demo">

<p>新手书籍推荐:《HTML5布局之路》</p>

</div>

</div>

显示效果:

2 使用JS进行动态的样式设置(即通过JS动态的获取这个标签的高度,然后再通过 元素.style.lineHeight的方法来设置具体的行高值,当然,这种设置比第一种要麻烦的多)