css深入理解之行高line-height

line-height的定义#

基线之间的距离

不同字体，基线位置不同

所有内联元素的样式表现都与行内框盒子模型有关，例如浮动的图文环绕效果

4种行内框盒子模型#

<p>hello world<em>this is em</em></p>

上面一行普通的文字，包含了4种盒子。

四种盒子模型：
1.“内容区域”（content area）
围绕文字看不见的盒子，内容区域的高度大小只与font-size的大小和font-family有关，在simsun宋体字体下，内容区域高度等于文字大小。

2.“内联盒子”（inline boxes）

3.“行框盒子”（line boxes）

每一行就是一个“行框盒子”，由一个个内联盒子组成
4.“包含盒子”（containing box）

由一行一行的“行框盒子”组成

line-height的高度机制与原理#

内联元素的高度是由行高决定的即line-height
单行文字也有行高
问：line-height明明是两基线距离，单行文字哪来行高，还控制了高度？
答：1.行高由于其继承性，影响无处不在，即使单行文本也不例外；
2.行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。

内容区域的高度+行间距=行距
在simsun宋体下：
font-size=240px=内容区域的高度
字号font-size+行间距=line-height行高
半行间距

多个行框盒子的包含容器
多行文本的高度就是单行文本高度累加

line-height的不同属性值#

line-height支持的属性值
① normal 默认值，与浏览器相关，
在同一浏览器中也和元素字体相关（font-family），所以考虑到兼容性，实际开发时，会对行高reset，保证各浏览器兼容性一致
② 根据当前的font-size计算

line-height：1.5;

实际行高=1.5*font-size（假设是200px）=30px
③ em,px,rem,pt
④ 根据font-size计算
⑤ inherit--行高继承（input默认的行高是normal）

1.5/1.5em(150%)的区别：
--1.5是根据自己的font-size计算line-height
--1.5em是根据父级元素font-size计算，相当于继承了父元素的line-height

经验：
--阅读 1.5
--网页开发 匹配20像素（20/font-size）计算结果取大不取小

line-height与图片的表现#

inline水平元素vertical-align默认基线对齐（基线：即字母x的下边缘）

如何消除图片底部间距？###

1.图片块状化-无基线对齐
vertical-align属性只对内联，内联块状元素有效
2.图像底线对齐

img{vertical-align：bottom；}

3. 行高足够小-基线位置上移

.box{line-height:0;}

line-height的实际应用#

• 图片水平垂直居中 （ie8+）

.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle}

• 多行文本水平垂直居中(ie8+)

.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block; line-height: nomal; text-align:left;vertical-align:middle;}

• 用line-height代替height，避免ie6/ie7的haslayout
  标题样式：

{height:36px;line-height:36px;}

其实可以直接简写成：

{line-height:36px;}

还有很多没有理解的地方。。。不开心。。。