码迷,mamicode.com
首页 > Web开发 > 详细

深入了解css的行高Line Height属性

时间:2015-04-26 09:11:00      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

来源:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

什么是行间距?

古时候我们使用印刷机来出来文字。印刷出来的每个字,都位于独立的一个块中。

行间距,即传说中控制两行文字垂直距离的东东。在CSS中,line-height被用来控制行与行之间垂直距离。

不过,行间距与半行间距,还是取决于CSS中的line-height。那么,如何来使用line-height呢?

默认状态,浏览器使用1.0-1.2 line-height, 这是一个初始值。你可以定义line-height属性来覆盖初始值:p{line-height:140%}

你可以有5种方式来定义line-height。

1.line-height可以被定义为:body{line-height:normal;}

2.line-height可以被定义为:body{line-height:inherit;}

3.line-height可以使用一个百分比的值body{line-height:120%;}

4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}

5.line-height也可以被定义为纯数字, body{line-height:1.2}

 

缩写line-height

那5种line-height写法,可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开,如:<font-size>/<line-height>

实例:body{font:100%/normal  arial;} , body{font:100%/120%  arial;} ,body{font:100%/1.2  arial;}  ,body{font:100%/25px  arial;} 

 

计算line-height

有些CSS属性是可继承的(inherited),从层叠的元素里传递下来。这样做是为了方便开发者,不再为后代元素重新设值。

对于line-height继承有点复杂。

1、百分比

技术分享技术分享技术分享技术分享

2.长度

技术分享技术分享

技术分享技术分享

3 值:normal

技术分享技术分享

技术分享技术分享

技术分享

4 纯数字

技术分享技术分享

技术分享技术分享

技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

 

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享技术分享

技术分享

(但实战应用在中文字体或中英文字体混合,以及IE678,XP win7里,行高规则又有所不同,泪流满面)

深入了解css的行高Line Height属性

标签:

原文地址:http://www.cnblogs.com/loveya/p/4457306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!