注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Jon的毛线球

叩首问路,码梦维生。

 
 
 

日志

 
 

关于CSS属性 line-height 的详细解析  

2014-03-28 20:47:37|  分类: HTML+CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

行高的概念看上去很简单——文字行的高度,其实,行高所涉及到的基础知识,对于今后理解其它属性也很重要。

最近做了个项目就是被一个行高搞得晕头转向 ,所以特地上网查了些资料。收获颇丰。

语法

line-height属性的具体定义列表如下:

语法:        line-height : normal | <实数> | <长度> | <百分比> | inherit

说明:        设置元素中行的高度。

值:        normal:默认行高,一般为1到1.2;

实数:实数值,缩放因子;

长度:合法的长度值,可为负数;

百分比:百分比取值基于元素的字体尺寸。

初始值:        normal

继承性:        继承

适用于:        所有元素

计算值:        长度和百分比值为绝对值;

其他同指定值 行高指的是文本行的基线间的距离。而基线(Base line),指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下 端沿,同时还有文字的顶线(Top line)、中线(Middle line)和底线(Bottom line),用以确定文字行的位置,如图所示。

关于CSS属性 line-height 的详细解析 - 毛线球 - zxy3622008的博客

 文字的基线 行高与字体尺寸的差称为行距(leading)

关于CSS属性 line-height 的详细解析 - 毛线球 - zxy3622008的博客

内容区域、行内框和行框

理论上讲,一行中的每个元素都有一个内容区域,它是由字体尺寸决定的,如图

关于CSS属性 line-height 的详细解析 - 毛线球 - zxy3622008的博客

内容区域 行内元素会生成一个行内框(inline box),行内框只是一个概念,它无法显示出来,但是它又确实存在。在没有其他因素影响的时候,行内框 等于内容区域,而设定行高则可以增加或者减少行内框的高度,即:将行距的值(行高-字体尺寸)除以2,分别增加到内容区域的上下两边,如图
关于CSS属性 line-height 的详细解析 - 毛线球 - zxy3622008的博客

<p style="line-height:20px;">&lt;p& gt;行高20px。

<strong style="line-height:50px;">&lt;strong&gt; 行高50px。</strong>

<span style="line-height:30px;">&lt; span&gt;行高30px。</span>

</p>

关于CSS属性 line-height 的详细解析 - 毛线球 - zxy3622008的博客

这里又有一个新的概念——行框(line box)。同行内框类似,行框是指本行的一个虚拟的矩形框,其高度等于本行内所有元素中行高最大的值。因此,当有多行内容时,每行都会有自己的行框,如图

关于CSS属性 line-height 的详细解析 - 毛线球 - zxy3622008的博客

行框的高度只同本行内元素的行高有关,而和父元素的高度(height)无关

ps:当内容中含有图片的时候,如果图片的高度大于行高,则含有图片行的行框将被撑开到图片的高度
 
注意:图片虽然撑开了行框,但是不会影响行高,因此也不会影响到基于行高来计算的其他属性。 提示:当行内含有图片的时候,图片和文字的垂直对齐方式默认是基线对齐。
 
浏览器的差别与错误
 浏览器在显示的时候往往会有自己的表现形式,例如在Opera内,行高将按照CSS定义的将行距除以2增加到内容区域的上下两边,而IE和Firefox则不是完全平分
关于CSS属性 line-height 的详细解析 - 毛线球 - zxy3622008的博客
 
不过,相差的1至2个像素在实际显示中一般不会有太大的影响,因此可以忽略不计。 比较严重的错误是IE 6.0对于含有图片或者表单元等可替换行内元素的行高失效的问题,不过,在IE 7.0中已经修正了这个错误,但是其表现同其它浏览器也不相同。 IE6还真是变态!

如下代码

#lineHeight4 p { line-height : 60px; } 

#lineHeight4 fieldset{ border : 0; } 

<div id="lineHeight4">  

<p>内容含有图片在[IE 6]内浏览line-height将失效。<img src="../../img/ddcat_anim.gif" alt="图片" width="88" height="31" /></p>  

<form id="testForm" action="#">  

<fieldset>  

<p>

<label for="test1">表单元素</label>

< input type="text" maxlength="16" value="IE6内行高失效" />

</p> 

</fieldset> 

</form>

</div>


 关于CSS属性 line-height 的详细解析 - 毛线球 - zxy3622008的博客

  包含替换元素的行高在IE内失效

可以发现,IE 7.0中,将半行距分别加在了图片的上下,而由于图片默认是基线对齐,因此文字的基线下移了,这显然不符合CSS中的规定。 对于IE 6.0中行高失效的问题,需要使用CSS Hack手段来针对IE 6.0设定替换元素的上下补白来修正。

真是变态~

单行文字在垂直方向居中

针对这个现象,一般只需要设定与高度相等的行高即可

此方法同样可以运用在其他需要文字垂直居中显示的地方,例如列表项、导航条等等。

  评论这张
 
阅读(16)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017