理解css行高line-height

line-height的概念

line-height CSS中的这一属性，我在学校的时候就已经“会”使用了，之所以加上引号，因为一直对line-height一知半解，用的最多的就是单行文本居中。line-height（行高）从字面上理解就是行的高度，而实际呢行高指的是两基线之间的垂直距离，这里有个名词基线，其实除了基线还有如底线、中线、顶线。一图胜千言，来张片片吧

[caption id="attachment_81" align="aligncenter" width="810"]基线、底线、中线、顶线示意图[/caption]

受浏览器类型、版本及字体等因素影响，制图并不是特别标准。另外图片“？”所示的高度，有人说是字体size，但我自己没找到相关的介绍，希望有了解的朋友指出。

line-height与line box高度

继续下面的内容之前，很有有必要先简单了解下line box模型，最初很长一段时间，我都认为CSS中一般由height显示指定或者由文字内容撑开元素来产生高度，这里要说明一下的是后者，就是文字并不一定能撑开高度，即文字不是产生高度最直接的原因，真正产生高度的是line-height及line box，line box是浏览器渲染模式中的一个概念，line box指的是一个虚拟的矩形框，它并不会直接呈现出来。line box内存在多个inline box，众多inline box里高度最高的inline box高度就是该line box的高度。先上一段很普通的代码

<div>我的外面有一个隐形的line box<span> 里面可能包含多个 </span><strong> inline box </strong>,哈哈！</div>

这段代码中就包含了几个inline box，span、strong、em、i等之类的内联元素标签会形成inline box，而没有任何标签包裹裸奔的文本形成匿名inline box，由这些inline box最终形成外面的line box，详细如下图注

[caption id="attachment_89" align="aligncenter" width="742"]inline box组成line box图注[/caption]

line box模型是个很重要的概念，很多问题的理解都会需要他，另外还有containing block、Block formatting context、inline formatting context等等，这里不深入了解了，后面有空再另外写个文章专门介绍line box和相关的内容。

line-height的属性值和单位

有了上面基线等四条线和line box模型的简单了解，现在就来看看line-height有哪些属性值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。单位em，px，pt等等
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

上面的描述相对比较官方，不怎么好理解，这里说下我对%和number的理解，其他相信都比较好容易，line-height是可以继承的，但是继承的方式不太一样。

%在设置某父元素（P）的line-height值为x%时，那么所有P的子元素（C）line-height就确定死了。具体的值为p.fontSize * x%;

number纯数字表现为，在设置某父元素（P）的line-height值为num时，确定的只是因子或者说成是一个比例num，P的子元素（C）line-height = num * C.fontSize;

$和length其实是差不多的，%只是会根据自身的字体大小转换一下。

line-height的实际应用

1、纯数字单位的应用

做项目的时候经常会碰到编辑器里出来的内容，编辑器中用户可以随意设置字体大小，如果在外框中line-height设置为%或者length形式，就很有可能出来文字重叠的情况，如下代码和图示

<div style="margin-bottom:20px; line-height:20px; font-size:12px;">
	<div style="font-size:30px;">我可能是编辑器<br />产生的内容</div>
</div>
<div style="margin-bottom:20px; line-height:160%; font-size:12px;">
	<div style="font-size:30px;">我可能是编辑器<br />产生的内容</div>
</div>

<div style="margin-bottom:20px; line-height:1.6; font-size:12px;">
	<div style="font-size:30px;">我可能是编辑器<br />产生的内容</div>
</div>

[caption id="attachment_96" align="aligncenter" width="240"]line-height单位设置[/caption]

所以，number纯数字作为line-height的单位是不错的选择

2、line-height实现元素垂直居中

单行文本的就不说了，地球人都知道

下面看下固定高度框内多行文本垂直居，代码如下：

CSS内容

.line-height-box{ margin-bottom:222px; border:solid 1px red; width:400px; line-height:400px;}
.line-height-box .text{ display:inline-block; line-height:1.6; vertical-align:middle;}
.line-height-box .vertical{ display:inline-block; width:0; font-size:0; overflow:hidden; vertical-align:middle;}

HTML内容

<div class="line-height-box">
    <span class="text">line-height实现固定高度框内多行文本垂直居中<br />\\更多的文字显示换行效果</span><span class="vertical">&nbsp;</span>
</div>

为什么他就居中显示了呢？一个一个来分析下，首先外层.line-height-box设置了line-height:400px;这样就产生了一个高度，且由于line-height的继承性，里面的子元素.vertical的line-height及height也为400，但.text重置了line-height所以他的高度为自身内容框的高度。同时.vertical和.text都设置了display:inline-block;属性使得他们会在一行显示，最后的大招vertical-align:middle;居中对齐，如下图所示。

[caption id="attachment_101" align="aligncenter" width="469"]line-height实现固定高度框内多行文本垂直居中[/caption]

关键点就是文本区域与一个固定高度居中对齐，所以把 line-height:400px;放到.vertical中也是可以的；如果不考虑ie6直接把<span class="vertical">&nbsp;</span>去掉都可以，因为外层有高度了。

line-height避免haslayout产生IE6 Bug

haslayout是IE家的东东，这里引用一段百科的内容

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）

让元素haslayout可以解决IE中很多bug，比如清除浮动产生的破坏等等，但是有的时候需要避免haslayout，如下代码

<div style="width:300px; height:150px; border:solid 1px red;">
	<span style="display:inline-block; border:solid 1px green;"><i style="display:block; line-height:50px;">随便一点内容</i></span>
	<span style="display:inline-block; border:solid 1px green;"><i style="display:block; height:50px;">随便一点内容</i></span>
</div>

在现代浏览器和IE6里产生的效果如下图：

[caption id="attachment_103" align="aligncenter" width="328"]hasLayout使inline-block元素宽度100%的Bug[/caption]

在IE6中宽度变成了100%，这并不是我们想要的结果，产生这个Bug的条件父元素display:inline-block;子元素display:block;且haslayout,CSS使元素haslayout的属性有很多，设置height为一个非auto的值，只是其中之一，即这里的height:50px;让i元素有了haslayout。

如果父元素换成块级元素也会出现该bug,如：

<div style="display:inline-block; border:solid 1px green; *display:inline; *zoom:1;"><i style="display:block; height:50px;">随便一点内容</i></div>

终于可以结尾了

第一次写这么长的文章，真的太累、太累了，不知道能不能坚持下去。

相关文章推荐：

1.CSS属性line-height新解