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

来源：互联网发布：无限极工资知乎编辑：程序博客网时间：2024/04/30 11:07

我们都知道，css和模型中，子元素水平方向的7属性(margin-left, border-left, padding-left, width, padding-right, border-right, margin-right)之和要等于父元素的width，那么垂直方向上的情况又怎么样呢？即子元素的margin-top， border-top，padding-top， height，padding-bottom，border-bottom，margin-bottom之和与父元素的height关系是什么。

下面我们先讨论marg-top和margin-bottom，然后讨论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;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(不考虑边距折叠)，你可以设置为任意值，依然可以按照指定的值显示。