css基础--line-height二

1、坊间流传着这么一种说法：“要想让单行文字垂直居中，只要设置line-height大小和height高度一样就可以了“。

.title {   
height: 24px;   
line-height: 24px; 
}

误区之一：要让单行文字垂直居中，只需要line-height这一个属性就可以，与height一点儿关系都没有。也就是说，我们直接

.title {   line-height: 24px; }

就可以了，坊间传闻的说法会误导大小一定要同时设置height属性才可以。
误区二：行高控制文字垂直居中，不仅适用于单行，多行也是可以的。准确的说法应该是“line-height可以让单行或多行元素近似垂直居中”。稍等，这里有个词似乎和上面的表述有点儿微妙的差异，“近似垂直居中”？没错，一定要加上“近似”二字，这样的说法才足够严谨。换句话说，我们通过line-height设置的垂直居中，并不是真正意义上的垂直居中！究竟是怎么一回事？这里，其实要解答的是两个问题，一个是为何可以“垂直居中”，另一个是为何是“近似”。正如上一节所说的，没有什么理所当然，行高可以实现“垂直居中”原因在于CSS中“行距的上下等分机制”，如果行距的添加规则是在文字的上方或者下方，则行高是无法让文字垂直居中的。说“近似”是因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低，譬如我们拿现在用得比较多的微软雅黑字体举例

肉眼就能看出字形明显偏下，平时的font-size比较小所以差距就1px左右，看不太出来。
多行文本或者替换元素的垂直居中实现原理和单行文本就不一样了，需要line-height属性的好朋友vertical-align属性帮助才可以

.box {   
line-height: 120px;   
background-color: #f0f3f9; 
} 
.content {   
display: inline-block;   
line-height: 20px;   
margin: 0 20px;   
vertical-align: middle; 
} 
<div class="box">   
<div class="content">基于行高实现的...</div> 
</div

实现的原理大致如下。（1）多行文字使用一个标签包裹，然后设置display为inline-block。好处在于既能重置外部的line-height为正常的大小，又能保持内联元素特性，从而可以设置vertical-align属性，以及产生一个非常关键的“行框盒子”。我们需要的其实并不是这个“行框盒子”，而是每个“行框盒子”都会附带的一个产物—“幽灵空白节点”，即一个宽度为0、表现如同普通字符的看不见的“节点”。有了这个“幽灵空白节点”，我们的line- height:120px就有了作用的对象，从而相当于在.content元素前面撑起了一个高度为120px的宽度为0的内联元素。注意这里的content是块级元素，line-height会作用在内部内联元素上，而不是它自己，它自己主要是被内部元素撑起来的,如果没有display:inline-block,content自身的的子元素是字符，被line-height作用，那么content自身高度如line-height高（单行文字），它的父元素被它撑起来如它一样高（即父元素的line-height不起作用,因为没有幽灵空白节点），但是这里设置了display:inlne-block,这样content设置line-height比父元素设置的line-height小也能起作用,也会生成幽灵空白节点使得父元素如line-height高，然后设置vertical-align(只能作用内联元素和table-cell元素)来使得content于父元素中对齐x-height的中心位置，x-height的中心位置又是因为content的父元素的line-height起作用导致近似垂直居中。
（2）因为内联元素默认都是基线对齐的，所以我们通过对.content元素设置vertical- align:middle来调整多行文本的垂直位置，从而实现我们想要的“垂直居中”效果。如果是要借助line-height实现图片垂直居中效果，也是类似的原理和做法。
这里实现的“垂直居中”确实也不是真正意义上的垂直居中，也是“近似垂直居中”。还是上面的多行文本垂直居中的例子，如果我们捕获到多行文本元素的尺寸空间，截个图，然后通过尺子工具一量就会发现，上面的留空是41px，下面的留空是39px

2、深入line-height的各类属性值
line-height的默认值是normal，还支持数值、百分比值以及长度值。
normal实际上是一个和font-family有着密切关联的变量值。只要字体确定，各个浏览器下的默认line-height解析值基本上都是一样的，但是不同浏览器，不同操作系统默认的字体不一样，因此，在实际开发的时候，对line-height的默认值进行重置是势在必行的。
数值，如line-height:1.5，其最终的计算值是和当前font-size相乘后的值。例如，假设我们此时的font-size大小为14px，则line-height计算值是1.5*14px=21px。
百分比值，如line-height:150%，其最终的计算值是和当前font-size相乘后的值。例如，假设我们此时的font-size大小为14px，则line-height计算值是150%14px=21px。
长度值，也就是带单位的值，如line-height:21px或者line-height:1.5em等，此处em是一个相对于font-size的相对单位，因此，line-height:1.5em最终的计算值也是和当前font-size相乘后的值。例如， 假设我们此时的font-size大小为14px，则line-height计算值是1.514px=21px。
line-height:1.5和另外两个有一点儿不同，那就是继承细节有所差别。如果使用数值作为line-height的属性值，那么所有的子元素继承的都是这个值；但是，如果使用百分比值或者长度值作为属性值，那么所有的子元素继承的是最终的计算值。

body {   
font-size: 14px;   
line-height: 1.5; } 
body {   
font-size: 14px;   
line-height: 150%; } 
body {   
font-size: 14px;   
line-height: 1.5em; 
}

对于元素而言，上面3段CSS最终的行高计算值是21px是没有任何区别的，但是，如果同时还有子元素

h3, p { 
margin: 0; 
} 
h3 { 
font-size: 32px;
}
p { font-size: 20px; } 
<h3>标题</h3> <p>内容</p>

结果line-height:150%和line-height:1.5em的最终表现是“标题”文字和“内容”文字重叠在了一起，而line-height:1.5的就是标题比较高，内容比较矮。整体布局合适。
如果随大流使用的是数值，我建议最好使用方便计算的行高值，一种是line-height属性值本身方便计算，另一种是line-height的默认计算值方便计算。比方说，1.3、1.4、1.5都有大型网站使用，我们就不妨使用1.5，因为心算1.416px要比1.516px难多了，这就是第一种“属性值本身方便计算”；而另外一种“默认计算值方便计算”是我们先得到方便计算的line-height计算值，然后倒推line-height应该使用的数值是多大，例如20px是一个非常方便的计算值，如果默认重置的font-size是14px，则line-height数值应该是20px/14px≈1.4285714285714286四舍五入的结果，在CSS中，计算行高的时候，行高值一定不要向下舍入，而要向上舍入，这样几个浏览器的行高都事差不多的

body {   
line-height: 1.42858;   
font-size: 14px; 
}

3、内联元素line-height的“大值特性”

<div class="box">  
 <span>内容...</span> </div> 
 .box {   line-height: 96px; } 
 .box span {   line-height: 20px; } 
 //和
 .box {   line-height: 20px; } 
 .box span {   line-height: 96px; }

问题：.box元素的高度分别是多少？正确的答案是：全都是96px高。
也就是说：无论内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的，我称之为“内联元素line-height的大值特性”。

这里的是一个内联元素，因此自身是一个“内联盒子”，本例就这一个“内联盒子”，只要有“内联盒子”在，就一定会有“行框盒子”，就是每一行内联元素外面包裹的一层看不见的盒子。然后，重点来了，在每个“行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”，如果套用本案，则这个“幽灵空白节点”就在元素的前方。
于是，就效果而言，我们的HTML实际上等同于：

<div class="box"> 字符<span>内容...</span> </div>

当.box元素设置line-height:96px时，“字符”高度96px；当设置line-height:20px时，元素的高度则变成了96px，而行框盒子的高度是由高度最高的那个“内联盒子”决定的，这就是.box元素高度永远都是最大的那个line-height的原因。
要避免“幽灵空白节点”的干扰，例如，设置元素display:inline-block，创建一个独立的“行框盒子”，这样元素设置的line-height:20px就可以生效了，这也是多行文字垂直居中示例中这么设置的原因。这里对应开头的垂直居中，但是这里的子元素是span本身是一个内联元素，所以父元素的lien-height能作用到它身上，且它前面有一个幽灵空白节点，但它本身也有line-height有效，所以如果父元素的line-height比它大，那么父元素被幽灵空白节点撑起来，父元素高度为父元素的line-height,若比span小，那么父元素被span撑起来那么就是span的line-heigth,这里的前提都是一行，如果是2行，父元素高度则是line-height*2。