-
div+css视频教程之css行距
css行距
行与行之间的距离最常用的称呼是行距, 而当网页设计者们发现他们能够控制行距 时最常用的称呼是"Weee!"行高 行高简直是上帝发给人间的福音。利用CSS行高我们可以随心所欲地控制行与行之间的 垂直距离。
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 天的课程中我们将研究文字及图象布局的 最佳方式。
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
这是目前我见过最好的跨域解决方案!
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比
一款纯 JS 实现的轻量化图片编辑器
关于开发 VS Code 插件遇到的 workbench.scm.
前端设计模式——观察者模式
前端设计模式——中介者模式
创建型-原型模式