CSS实例教程:行高line

2021-03-16 18:56 jianzhan

有关文章内容:CSS实例教程:行高line-height特性(1)
7.3.3行高的测算与承继 以em、ex和百分比为企业的行高,其基数是元素自身的字体样式规格。比如有编码以下: <pstyle="font-size:20px;line-height:2em;">字高20px,行高2em。</p> <pstyle="font-size:30px;line-height:2em;">字高30px,行高2em。</p> 2个段落的行高都为2em,可是字体样式尺寸不一样,因而显示信息如图7⑵3所示。 图7⑵3行高的测算 行高能够设置得比字体样式高宽比小,此时多行的文本将叠加到1起,比如有以下编码,其显示信息如图7⑵4所示。 p{ font-size:20px; line-height:10px; } <p>字高20px,行高10px。此时多行的文本将叠加到1起。</p> 图7⑵4比字体样式高宽比小的行高 行高是可承继的,可是承继的是测算值,比如有以下编码: p{ font-size:20px; line-height:2em; } pspan{ font-size:30px; } <p>字高20px。<span>字高30px。</span></p> <p>元素的行高2em,字体样式规格为20px,因而测算值为40px,尽管<span>元素自身的字体样式规格为30px,但是其承继的行高仍为40px。可是在不一样的访问器内显示信息的实际效果却不尽同样,如图7⑵5所示。 图7⑵5行高的不一样主要表现 因为承继的是测算值,因而当元素内的文本字体样式规格不1样的情况下,假如设置固定不动的行高极可能导致字体样式的重合,比如有以下编码,其显示信息如图7⑵6所示。 p{ font-size:20px; line-height:1em; } pspan{ font-size:30px; } <p>字高20px,行高1em,当文字为多行时将会会产生文本重合的想像。<span>字高30px。</span></p> 图7⑵6行高承继导致文本叠加 以便防止这类状况,能够为每一个元素独立界定行高,可是这样很烦琐,因而能够界定1个沒有企业的实标值做为放缩因素来统1操纵行高,放缩因素是立即承继的,而并不是承继测算值。比如改动上例中的行高为: p{line-height:1;} 则上例中的XHTML编码显示信息如图7⑵7所示。 图7⑵7放缩因素对行高的危害 当內容中含有照片的情况下,假如照片的高宽比超过行高,则含有照片行的行框将被撑开到照片的高宽比,如图7⑵8所示。 图7⑵8含有照片的行 留意:照片尽管撑开了行框,可是不容易危害行高,因而也不容易危害到根据行高来测算的别的特性。 提醒:当行内含有照片的情况下,照片和文本的竖直对齐方法默认设置是基准线对齐,有关竖直对齐将在本章[7.4竖直对齐:vertical-align特性]1节中探讨。