百分数高度

前面已经了解了如何处理设置为长度值的高度，下面再花点时间介绍网页设计中百分数高度。如果一个块级正常流元素的height设置为一个百分数，这个值则是包含块height的一个百分数。给定以下标记，相应的段落高度将是3em:

<div style="height: 6em;">

<p style="height: 50%;">Half as tall</p>

由于将上、下外边距设置为auto时，实际上它们的高度将是0，因此，网页设计中将元素垂直居中的唯一办法就是把上、下外边距都设置为25%。

不过，如果没有显式声明包含块的height，百分数高度会重置为auto，如果修改上例，使div的height为auto，段落将与div本身的高度完全相同：

<div style="height: auto;">

<p style="height: 50%;">NOT half as tall; height reset to auto</p>

</div>

这两种可能性在图7-16中做了展示（段落边框和div边框之间的间隔是段落的上、下外边距）。

图7-16：不同情况下的百分数高度auto高度

auto高度

在最简单的情况下，网页设计中如果块级正常流元素设置为height: auto。显示时其高度将恰好足以包含其内联内容（包括文本）的行盒。高度为auto时，会在段落上设置一个边框，并认为没有内边距，这样下边框刚好在文本最后一行的下面，上边框则刚好在文本第一行的上面。

如果块级正常流元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高块级子元素的外边框边界到最低块级子元素外边框边界之间的距离。因此，子元素的外边距会“超出”包含这些子元素的元素（这种行为将在下一节解释）。不过，网页设计中如果块级元素有上内边距或下内边距，或者有上边框或下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离：

<div style="height: auto; background: silver;">

<p style="margin-top: 2em; margin-bottom: 2em;">A paragraph!</p>

</div>

<div style="height: auto; border-top: 1px solid; border-bottom: 1px solid; background: silver;">

<p style="margin-top: 2em; margin-bottom: 2em;">Another paragraph!</p>

</div>

这两种行为都在图7-17中得到了展示，

图7-17：有块级子元素且高度为auto

如果在上例中将边框改为内边距，对div高度的作用还是一样：同样会把段落的外边距包含在内。