css行高:line-height属性详解(3)
作者:ddcatlee 来源:猫沙盆 发布时间:2008-06-24 11:42:00
标签:line-height,行高,文字,css
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 含有图片的行
注意:图片虽然撑开了行框,但是不会影响行高,因此也不会影响到基于行高来计算的其他属性。 提示:当行内含有图片的时候,图片和文字的垂直对齐方式默认是基线对齐。
0
投稿
猜你喜欢
- Oblog4.6 ACCESS版转换为UCenterHome1.5的全过程1、 说明:
- Css tranistions允许元素的属性在单位时间内发生平滑的过渡,在阅读完《CSS Transitions Module Level
- 内容摘要:统计在线人数的方法很多,可以使用Application来统计在线人数,也可以使用IP来统计在线人数。各有优点。本文介绍了通过判断S
- RegExp就是建立正则的对像。如:Set regEx = New RegExp regE
- SELECT表名=case when a.colorder=1 then d.name else '' end,表说明=ca
- ASP调用WEBSERVICE----INDEX----1. soap请求方式2. post请求方式3.&
- 让我们重温一下JavaScript的一些基础知识,请先写出以下代码中问号处的答案,再运行比较!<script type=&q
- 代码如下:use tempdb if object_id('tempdb..#table') is not null dro
- 使用SQLSERVER的应该经常遇到“Unable to read local eventlog (reason:事件日志文件已在读取时间更
- 上次谈到客户端和服务端的编码“陷阱”,其中对url编码只是提及带过,并没有做深入讨论,事实上由于浏览器环境的复杂和不一致性,我们也很容易掉进
- 三、支持XML的公司和它们的开发工具 尽管XML还处在开发阶段,其标准正在由W3C组织制定,但是已经有许多公司表示全力支持XML,并开发了不
- Set objTextStream=FileSystemObject.CreateTextFile(Filename,[Overwrite]
- 一个客户提供一个股价的信息,要求放在页面上,显示一些数据,需要从远程获取xml,然后解析写在网页上,开始不会觉得很难,其实蛮简单的,先用ja
- ASP与存储过程(Stored Procedures)的文章不少,但是我怀疑作者们是否真正实践过。我在初学时查阅过大量相关资料,发现其中提供
- 全球数据量的疯狂增长,使得市场对资深数据库管理员的需求也节节攀升。据统计,一直到2016美国IT市场对数据库管理员的需求量增长都将会超过所有
- 1.将以下代码加入到HEML的<body></body>之间<SCRIPT language=jav
- JavaScript是一门OOP,而有些人说,JavaScript是基于对象的。1) 如何创建对象:1. 使用constructor,例如:
- 所谓“评论”不是必须得有文本框,用户录入提交数据才算,广义上的评论包括用户的任何“表态”,典型如打分。我接触电子商务时间并不长,最早应该是0
- 核心提示:本文针对mysql-noinstall版本,也就是解压缩版的安装配置应用做了个总结,这些操作都是平时很常用的操作。文章中不对mys
- 首先,大家先去下载一份dvbbs.php beta1的代码,解压后先抛开php代码,找出你的mysql手册,如果没有手册那么就直接看下面的实