line-height与图文对齐 笔记

基本概念：
块：block 特点独行
内联：inline
内联块：inline-block

如果元素display属性默认值为block，则为块元素。如div p
如果元素display属性默认值为inline或inline-block，则为内联元素。如span img
（通常所说的内联指，内联和内联块）

字格：所有的文字都放在1个矩形中，为了方便区分，称这个矩形为字格。
字格4线中垂点（对齐用的）：基线（字母x底部切线），中线（字母x底部向上1/2个字母x高度，在中垂点下面一点点），顶线，底线。
中垂点：字格垂直方向中点。
图片（对齐用的）：顶部，底部，中垂点。
行高：2行字母基线间距。（字面意思，但实际作用不只如此）
行内框(inline-box)：包裹一个元素的区域，我们只关注它的高度
行框(line-box)：包裹一行的区域，我们只关注它的高度、内部元素的对齐。

1.父字格---用来对齐的参考字格，由父容器的字体决定。
所有的内联元素，先跟父字格对齐。父字格不会显示的，它只是用来对齐的。
2.默认对齐---基线对齐
不同大小的文字的基线和图片等内联块（inline-block）的底部和父字格的基线对齐。
3.对齐框
取文字等字格中垂点和图片等内联块（inline-block）的顶部和底部中最高和最低点为对齐的上下边界。
内联文字对齐框高度：各个不同大小字格中垂点相对于对齐上边界的距离。
图片对齐框高度：图片底部和对齐上边界的距离。
4.行高
1.line-height可以继承，单独作用于内部的不同大小文字和父字格。
2.没有单独设置，也没有继承值，则使用默认值0。
3.只影响文字（内联、内联块、块）
5.行框高度
行框高度==最高的行内框高度

1)最高行内框：
1.内联文字行内框高度：内联字格对齐框高度+line-height（不同字格包括父字格大小相同或不同行内框不一样的）
2.图片行内框高度：图片对齐框高度
3.内联块文字行内框高度：

2)---<非常重要>---<最高行内框，行高努力对齐原则>---
让最高行内框元素的中垂点尽可能靠近行框的中垂点。

1.该元素中垂点在对齐框上半部分，说明元素偏上，line-height先扩展上边界，上下相等时，同时扩展。
2.该元素中垂点在对齐框下半部分，说明元素偏下，line-height先扩展下边界，上下相等时，同时扩展。
这样元素的中垂点就尽可能的靠近行框的中垂点。

6.主元素：
把最高行内框的元素称为主元素，该元素直接决定行框高度。
元素总高度=对齐高度+line-height;//---最重要---//
元素总高度=对齐高度+line-height;//---最重要---//
元素总高度=对齐高度+line-height;//---最重要---//
案例：
line-height=50px,子字格font-size=40px,父字格font-size=0
现象：子字格没有居中
原因：父字格字体小，对齐高度高，line-height都为50px,所以父字格成为主元素，行高努力对齐主元素。
7.多种内联文字对齐关键：消除对齐高度。//非常重要
8.top,bottom的研究：要使用img元素参考，并将该对齐方式的内联元素，先让line-height=0，再逐渐增加，看变化。

案例：
<div>
x <span>x</span>
</div>

验证1：对齐框存在
改变span的font-size，查看框的变化
div{
font-size: 50px;
border: 1px solid #333;
line-height: 0;
}
span{
font-size: 50px;
}

验证2：元素最高行内框=元素对齐框高度+line-height
不断增加span的line-height，超过某个临界点（仍小于div的line-heigth:100px），行框就会变化。
div{
font-size: 50px;
border: 1px solid #333;
line-height: 100px;
}
span{
font-size: 10px;
line-height: 0px;
}