1.text-indent
text-indent通常用于缩进文本的第一行,只能用于块级元素和行内块元素,但如果把行内元素放到块级元素中,行内元素会随着块级元素的文本一起缩进,使用百分数赋值时,相对于父元素的宽度计算,该属性可被继承。
2.text-align
改变元素中文本行的对其方式,同样只能用于块级元素和行内元素。但如果把行内元素放到块级元素中,给外边的块级元素设置text-align,行内元素的内容也会受到影响。
3.line-height
line-height指文本行基线之间的距离。line-height可用于所有元素,具有继承性。使用百分数赋值时相对于font-size来进行计算。
说文本行基线可能不是很直观,有时我们近似把它叫成行高,例如:
<p style="width:80px;line-height:150%;">大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大嗒嗒嗒嗒嗒嗒嗒嗒</p>
当我们改变line-height的值,可以很直观地观察到每行高度的变化(但字的大小不会变)。如果我们把line-height设成0,在上面的html中,所有文字会重叠成一行。因为基线的间距没了,所以每行的基线都在一行了
谈到基线,我们要提一个名词,行内框(inline box)。之前讲到font的时候,说过font-size设置的大小等于em box的高度。那么inline box的高度就等于line-height的值(我是这么理解的)。当我们不主动设置line-height时,浏览器一般会默认设置它为120%(也就是font-size的1.2倍),这个在不同的浏览器上会有一些不同。em box表示内容区,line-height的值 - font-size的值 = 内容区外的高度 。 这部分高度会一分为二放到em box的上边和下边。em box加上这两个高度后,就变成了inline box。另外补充一下,根据书中的图,基线应该在em box内的中下方位置。
下面来看这段代码:
<p style="line-height:0;width:80px;margin:0;">1111111</p> <p style="line-height:100%;width:80px;margin:0;">111111</p>
这段html显示出来后,第二行的上半部分会和第一行的内容重合。为什么没有完全重合?(以下为个人分析)因为他们两个是同级,line-height没有继承,虽然第一行的line-height值变成了0,但第二行的line-height还是默认值。第一行的line-height虽然没了,但基线和em box还在,line-height表示基线间的距离,但在这里,第一行和第二行基线的距离应该怎么算?它既不等于0,也不等于第二行的line-height。 在正常情况下,两行基线的距离是第一行基线到第一行inline box下边界的距离加上第二行基线加上第二行inline box上边界的距离。上面这种情况,第一行的inline box没了,所以第一行基线到inline box下边界的距离也就没了,但是第二行还是正常的,所以两行文本的间距为第二行基线到inline box上边界的距离。
4.vertical-align
vertical-align应用于行内元素,表单元格和替换元素(替换元素指显示出的内容并非html中所写的文本,如img元素),不可继承。默认值为base-line,当使用百分数设置值时,相对于line-height进行计算。
vertical-align:baseline。将一个元素的基线和其父元素的基线对其。若果这个元素没有基线,则把它的底部和父元素的基线对齐。
vertical-align:sub/super。将一个元素的基线或底部相对于父元素的基线降低或升高一段距离。对于这段距离,规范没有给出规定,不同的用户代理可能给出不同的值。
vertical-align:bottom,text-bottom,top,text-top这几个值书中讲解地不是很详细。bottom/top是将元素的inline box的底端/顶端和行框的底端/顶端对齐(行框的定义后面会介绍) text-bottom和text-top是把行内框的顶端/底端与父元素的内容区的顶端/底端对齐。
vertical-align:midde。将元素行内框的中点和父元素基线上方0.25em处对齐。
vertical-align:百分数。将元素的基线或替换元素的底边相对于父元素的基线升高或降低指定的量。相对于该元素的line-height值来计算。(不是父元素的line-height值)
使用vertical-align后升高或降低的元素不会成为另一行的一部分,也不会覆盖其他行中的文本,他会使文本行变高。
