欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 教程文档 > Css&Div > 3.3 行距

3.3 行距

2018-05-05 436 收藏 0 赞一个 0 真差劲 0 去评论

行与行之间的距离最常用的称呼是行距,而当网页设计者们发现他们能够控制行距时最常用的称呼是"Weee!"

行高

行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。

B { line-height: 16pt }

你所用的参数就是相邻两行的基准线(基准线就是英文小写字母如x,a的下阶线,但不包括诸如y,g等字母超过下阶线的部分)之间的垂直距离。注意你所设定的参数将完全代替浏览器的缺省参数。

Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如果你将参数设为10px,浏览器将把文字的第1行以10px的高度显示。

有3种设定行高的方法:

数字

长度单位

比例

用数字设行距

B { font-size: 12pt;  line-height: 2 }

当你用数字设定行高的时候,浏览器将利用字号来确定行距:它将字号乘以设定的参数值。所以,在本例中,行高将是24点。显示效果如下:

Four score and seven years ago,

the Web wasn't yet a glimmer in

anyone's eye. No one needed it,

no one missed it. Eighty-seven

years from now, what will

people laugh at us for lacking?

你还可以用小数设定参数值。

(你应该知道IE 3 不支持数字参数值,在IE 3 中使用数字参数将出现大片文字的互相重叠。)

用长度单位设定行距

B { font-size: 12pt; line-height: 11pt }

设定行高的另一种方法就是利用先前学过的长度单位(em及pt是最常用的单位),以下为显示效果:

Four score and seven years ago,

the Web wasn't yet a glimmer in

anyone's eye. No one needed

it, no one missed it.

Eighty-seven years from now,

what will people laugh at us

for lacking?

你既可以轻松地将行距缩小也可以将行距放大。有了样式表,这一切都易如反掌!

用比例设定行距

B { font-size: 10pt; line-height: 140% }

在本例中,行距是长度10points的140%,即14points。明白了吗?

让文字互相重叠!

你可能会问这样的问题:如果行距太小的话,文字岂不就重叠在一起了吗?是这样的。我们来看看这个例子:

B { font-size: 28pt; line-height: 2pt }

以下为显示效果:

Whoa.

Cool.

"Whoa" 使用了浏览器的缺省行高设置。但"Cool"的行高很小所以它和第1行重叠了。  

(Communicator和Internet Explorer对行高的诠释有所不同。 Communicator将只是将文字的上半部分重叠一点,而IE则将其全部重叠。)

如果你计划将你的网页中的某些内容重叠显示,行高设置还不是最佳的选择,因为不同的浏览器对其的支持有差别。在第5天的课程中我们将研究文字及图象布局的最佳方式。

返回主目录
暂无界面图片

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论