css盒模型中子元素垂直方向上总高度与父元素height的关系

作者: 来源: 更新时间:2013-03-04 11:43:02 点击:

<html> <head> <title>MarginBottom</title> </head> <body> <div style = "background: gray; width: 100px;height: 100px;border: 2px solid green;"> <div style = "background: red;margin:20px 0 200px;"> A </div> <div style = "background: black;color: white"> C </div> </div> <div style = "background: blue; width: 100px; height: 100px;"> </div> </body></html>

运行结果(在火狐中):

灰色div框的高度设置为height = 100px(设置绿色边框是为了防止和红色div框的上边距折叠),而它的第一个子div框(红色)的上边距为20px,下边距为200px,即使不算红色div框的内容的高度(即其height值),这两项之和(即红色div框的margin-top + margin-botttom)为220px,大于其父div(灰色)的height值,因此灰色div框的第二个子div框(黑色)被推了出来。但是我们发现,红色div框里面的文本依然能够正常显示,并且有背景色,说明红色div存在高度。而且,这些对蓝色div框(灰色div框的兄弟节点)的显示没有影响。

这种情况在IE9里面有所不同,下面是在IE9里面的运行情况:

可以看到,情况和在火狐里面不同,父div框(灰色)扩展了自己的高度。

下面再来看padding-top和padding-bottom,代码和运行结果如下:

<html> <head> <title>MarginBottom</title> </head> <body> <div style = "background: gray; width: 100px;height: 100px;border: 2px solid green;"> <div style = "background: red;padding:20px 0 200px;"> A </div> <div style = "background: black;color: white"> C </div> </div> <div style = "background: blue; width: 100px; height: 100px;"> </div> </body></html>

运行结果(火狐中):

从结果可以看到,红色div框的padding-top(20px)与padding-bottom(200px)之和大于父div框的height(100px)值,但是红色div框仍然有一定的高度,能够正常显示文本。情形和上面的margin-top,margin-bottom差不多,不同的是背景色从灰色div框里面延伸了出来,并且延伸出来的背景色位于蓝色div框的下方。而且不影响蓝色div框。

在IE9里面,父元素依然扩展自己的高度,运行结果如下:

总结

从上面的结果中可以看出,子元素垂直方向上的7属性和父元素的height之间没有像水平7属性与父元素的width之间的关系,即子元素垂直方向上的7属性之和并不一定要等于父元素的height值。由于没有了这种约束,这7个属性之间互不影响,比如父元素的height为200px,子元素(没有padding,border)的margin-top为20px,margin-bttom为50px,子元素的height并不非得为130px(不考虑边距折叠),你可以设置为任意值,依然可以按照指定的值显示。