重看css权威指南 part5

    上部分讲了水平方向，这次来讲垂直方向。

    垂直方向上比较坑，margin-top和margin-bottom的百分比是根据包含块的width计算的，但height的百分比却是按照包含块的height计算，所以单纯的margin-top:25%;margin-bottom:25%;height:50%;并不能实现垂直居中。

    当给一个块级元素的height设为auto，它的实际高度恰好足以包裹它的内容。如果不为它设置border或是padding，其子元素的margin将会超出父元素。此时父元素的height = 子元素的height。而不是子元素元素框的高度。

    如果不设置内边距或是边框，垂直方向上的外边距会合并，合并后的值为较大的一个。

    垂直方向上出现负外边距要怎样合并呢，如果都为负，浏览器会取两个中绝对值较大的那个。如果一正一负，会从正值减去负值得绝对值。垂直方向上的负外边距会造成一种拉近效果，这块不太明白，先这样。

      下面补充一下行框，行内框，行内元素等内容，行内元素有两种，一种是替换元素，之前介绍过概念，一种是普通行内元素，这两种情况稍有不同，后边分开讨论。

    先介绍一些概念：

    1.匿名文本：匿名文本指所有未包含在行内元素中的字符串。空格也是匿名文本的一部分。

    2.行内框：对于非替换元素，行内框高度 = line-height的值。对于替换元素，其高度等于内容区的高度。

    3.内容区：内容区是元素中各字符的em框串在一起组成的框，对于替换元素，内容区是元素的固有高度加上可能有的外边距，边框和内边距。

    4.行间距：这里行间距指line-height和font-size值之差。分为两部分，分别应用到内容区的顶部和底部。行间距只能应用于非替换元素。

    5.行框：行框是要包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行内框的上边界，底边要放在最低行内框的下边界。

    再补充几点：

    1.行内元素的背景应用于内容区及所有内边距

    2.非替换元素的padding，border，margin不会影响元素行内框的高度及包含该元素的行框的高度。

    3.替换元素的外边距和边框会影响该元素的行内框的高度及包含该元素的行框的高度。

生成行框的大致步骤：将一行的各元素基线对齐，根据vertical-align定位每个元素行内框分别相对基线偏移多少，最后，生成行框。