对div行高的理解

部分内容引用自http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

未定义height的div的高度如何确定

首先，当我们只是在html上定义了一个div，未为div指定height，且div中没有任何内容时，我们会发现，div的高度为0，这让我们意识到，div是被内部一些元素的高度撑起来的，那么是被什么撑起来的呢？是文字，图片的高度？说的不准确，是被容纳每行文字内容的line boxes撑起来的（注意，是每行，如果有5行，就有5个line boxes将5行文字分别包起来），这个line boxes其实就是一个盒子，它也只有一个属性，line-height，来指明盒子的高度。做个实验：

css：

.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}

html：

<div class="test1">测试</div>
<div class="test2">测试</div>

结果这样：

很显然，test1处的div高度为0，test2处div的高度为20，它被盒子撑了起来。

line boxes内部探索

再往里看，这个line boxes的内部又是怎样的呢，其内部，是 – inline boxes（其实也就是line boxes所包括的所有行内元素。每个元素是一个--inline boxes），line boxes会检视，看哪个-inline boxes的line-height实际值最高，最高的那个值，就是line boxes的line-height属性值。

line-height计算的上下边界确定

line-height值以及div高度如何确定我们知道了。再看，line-height是从哪到哪的高度呢：以其对应元素的基线为中心，向上下各自扩展line-height/2的长度。

这样又出现了一个问题，什么是基线？

记得我们小时候写英文的那个四线格吗？第二条线，也就是a、b、c这些字母，下对齐的那条线，就是基线。