非布局样式-行高

1. 文本区域上面的称为“顶部”下面的成为"底部"，但是字并不是对齐于“底部"，而是对齐于"基线base-line"。
2. 当外层block（div/section/article）没有设置高度时，多个inline-box组成line-box,line-box的高度决定行高【外层block（div/section/article）的高度由最高的line-height确定】；外层block设置高度后若block高度小于line-height,则无法对齐
3. line-height和文本区域不是一个东西，文本区域与字体大小font-size有关，当一行中多个inline-box的font-size不同时，各自的顶部和底部不在一条水平线上，但字都是基于基线对齐的
4. 如果一行中某个inline-box设置了字体大小，其齐的基线不会变，但是：
   • 字体过大则会将一行line-box的高度撑大
   • 字体小则文本区域会显得小
5. 使用line-height和font-size时会使文本区域垂直居中（顶部和底部），但字符不一定是完全垂直居中的（看文字对齐方式，文字一般是基于基线对齐）
6. 当一个line-box中有多个inline-box时，所有inline-box都用vertical-align:middle才会时文本区域居中；当都设为 top时，也是按照box的顶部对齐的，并不是按照字来对齐
7. 图片也是inline-box元素，图片的底部与基线对齐，会有留白，可以解决：
   • display:block; 这样会把图片编程块，独占一行，其他的会被机器侠
   • vertical-align:bottom; 这样就可以对齐下面了