css行高:line-height属性详解(3)
作者:ddcatlee 来源:猫沙盆 时间:2008-06-24 11:42:00
7.3.3 行高的计算与继承 以em、ex和百分比为单位的行高,其基数是元素本身的字体尺寸。例如有代码如下:
<p style="font-size:20px;line-height:2em;">字高20px,行高2em。</p> <p style="font-size:30px;line-height:2em;">字高30px,行高2em。</p>
2个段落的行高都为2em,但是字体大小不同,因此显示如图7-23所示。
图7-23 行高的计算
行高可以设定得比字体高度小,此时多行的文字将叠加到一起,例如有如下代码,其显示如图7-24所示。
p { font-size : 20px; line-height :10px; } <p>字高20px,行高10px。此时多行的文字将叠加到一起。</p>
图7-24 比字体高度小的行高
行高是可继承的,但是继承的是计算值,例如有如下代码:
p { font-size :20px; line-height : 2em; } p span { font-size : 30px; } <p>字高20px。<span>字高30px。</span></p>
<p>元素的行高2em,字体尺寸为20px,因此计算值为40px,虽然<span>元素本身的字体尺寸为30px,不过其继承的行高仍为40px。但是在不同的浏览器内显示的效果却不尽相同,如图7-25所示。
图7-25 行高的不同表现
由于继承的是计算值,因此当元素内的文字字体尺寸不一样的时候,如果设定固定的行高很可能造成字体的重叠,例如有如下代码,其显示如图7-26所示。
p { font-size : 20px; line-height : 1em; } p span { font-size : 30px; } <p>字高20px,行高1em,当文本为多行时可能会发生文字重叠的想象。<span>字高30px。</span></p>
图7-26行高继承造成文字叠加
为了避免这种情况,可以为每个元素单独定义行高,但是这样很烦琐,因此可以定义一个没有单位的实数值作为缩放因子来统一控制行高,缩放因子是直接继承的,而不是继承计算值。例如修改上例中的行高为:
p { line-height : 1; }
则上例中的XHTML代码显示如图7-27所示。
图7-27缩放因子对行高的影响
当内容中含有图片的时候,如果图片的高度大于行高,则含有图片行的行框将被撑开到图片的高度,如图7-28所示。
图7-28 含有图片的行
注意:图片虽然撑开了行框,但是不会影响行高,因此也不会影响到基于行高来计算的其他属性。 提示:当行内含有图片的时候,图片和文字的垂直对齐方式默认是基线对齐。
标签:line-height,行高,文字,css
0
投稿
猜你喜欢
给页面 unload 加上效果
2009-03-12 12:32:00
SSB(SQLservice Service Broker) 入门实例介绍
2024-01-27 14:19:00
javascript 读取图片文件的大小
2024-04-17 10:40:11
详解Python字典查找性能
2022-05-06 10:45:34
python模块导入方式浅析步骤
2023-05-13 01:08:13
各种 lightbox 实现效果介绍
2007-11-06 19:16:00
python操作mysql、excel、pdf的示例
2024-01-14 17:43:27
python连接sql server数据库的方法实战
2024-01-22 03:28:38
Python虚拟环境virtualenv的安装与使用详解
2022-02-22 02:19:46
SQLite3数据库的介绍和使用教程(面向业务编程-数据库)
2024-01-28 20:40:07
Python中的defaultdict模块和namedtuple模块的简单入门指南
2022-01-21 07:10:20
关于python中time和datetime的区别与用法
2022-07-15 00:54:17
Asp.Net MVC3.0如何项目部署到Win7 64位系统
2024-03-12 19:59:34
javaScript 删除字符串空格多种方法小结
2024-05-02 16:10:33
bootstrap table单元格新增行并编辑
2024-04-10 16:09:09
pytorch下大型数据集(大型图片)的导入方式
2021-01-18 05:30:29
SQL Server附加数据库时出现错误的处理方法
2024-01-20 19:57:58
SQL 截取字符串应用代码
2024-01-21 08:53:14
python实现将html表格转换成CSV文件的方法
2023-08-25 00:48:41
MySQL查询缓存优化示例详析
2024-01-27 12:21:32