vertical-align && line-height

vertical-align && line-height

1. vertical-align: 百分比, 可以体现出上面的两个属性之间是有很大的关联的。

2. vertical-align 的百分比值不是相对于字体大小或者其他的什么属性来计算的，而是相对于line-height来计算的，比如：{line-height: 30px; vertical-align: -10%;} <===> {line-height: 30px; vertical-align: -3px;}

3. 对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！

4. vertical-align：对块状水平的元素无感， 也就是说，对于一个块级元素，只是单纯的拥有line-height的时候，改变vertical-align,是不会影响该元素的任何实质性的显示效果

5. 行内元素的排版是从左往右依次排布的

6. 一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

7. css中起高度作用的应该就是height以及line-height了吧！如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用

8. 内联元素盒模型：

行框（line boxes）: 如果是多行的话，那么总的行框的高度(line boxes)就是每行的line box的高度之和(这是在没有设置height的时候)

行内框（inline boxes）:一行中的文字，图片之类的内联元素中line-height值最高，那么该行内line box的高度就是这个内联元素的line-height，也即是该行的高度。依次类推，得到最终的总高度即是的line boxes高度，

content-area仅仅与文字的大小有关，其作用仅仅是显示内容而已。

inline-box--->inline boxes---->line box(内部的inline boxes的上下最大绝对差值决定的)--->line-boxes

☆：每个inline属性的标签外部都有一个inline box

9. 如何修复单选框或者是复选框相对于十二像素字体大小不对其的问题：可以通过vertical-align：数值的方式实现，vertical-align: -2px; 元素相对于基线向下偏移两个像素的距离。

10. vertical-align属性只会在inline-block水平的元素上起作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的。