详解line-height

前文

此文章为个人笔记，学习张鑫旭老师的详解CSS后所得。详细内容可前往慕课网或张大大私人网站查看，这里就不挂链接了。以上。

---

正文

定义

两行文字基线之间的距离。why ?  基线是各种线定义的根本，也就是相对于基线xx位置来定义的。所以用基线间的距离而不是中线之类的等等。

补充：基线分为3种，alphabetic baseline（英）hanging baseline （印度）ideographic baseline（中）

一些结论

- block类无基线对齐这种说法

- 不同字体和基线的位置也不尽相同，有的会往下沉一些，有的高一些。

- 行高并不能使字完全居中，只不过平时使用字体通常相对较小，所以不明显。当字体很大时，偏差就会增大

- 内联元素高度由行高决定：高度的表现不是行高，是由内容区域+行间距（ = 行高）

- 单行文本的高度 ！= 最高的那个行高，vertical-align等都会影响到。多行文本高度是单行文本高度的叠加。

行内盒子模型

- 内容区域，与font-size font-family 相关，围绕文字，看不见。然后用鼠标框选深色背景那个？  SimSun的字体，内容区域 == font-size

- 内联盒子， 有匿名内联盒子的分支，作用是不让内容成块显示

- 行框盒子，每一行一个盒子

- 包含盒子，由行框盒子组成

概括说就是，内容区域包含着文字 ，然后区域外面有（匿名）内联盒子，多个内联盒子组成行框盒子，最外层是包含盒子。内联盒子决定了元素内容并排显示，行框盒子决定了行数和换行。最后一个大容器包裹

属性

normal | number | length | percent | inherit

line-height是可以继承的。normal的值和字体相关，然后各个浏览器表现又不同，所以慎用！number length percent 计算无差别，都是font-size的倍数，但是内在意义不同。

number 所有可继承元素根据font-size重新计算而 length 1.5em 或 百分比则是当前元素根据font-size计算行高，然后把值继承下去，后面不计算。所以推荐使用number

一些实例

- 多文字阅读向，建议1.5-1.6行高，平时的话就 20/14 = 1.4286 即可，就是高度20 字体14 行高1.4286的意思

- 图片在div内，底部留白。方法： img->block ; vertical-align:bottom ; line-heigth:0  三种皆可

- 小图片打文字， 高度基本由行高控制

- 大小不固定的图片，多行文字垂直居中。 盒子设行高，文字居中。然后图片设置垂直居中；多行文字居中的要在文字外加一个容器，然后容器inline-block，其余类似

- line-height 替代 height 可以避免IE6/7出现haslayout

- height: xx ; line-height: xx ，其实高度那一项可以省略