css3 中 margin-top使用的注意点

最近在写一个前端页面的时候使用了margin-top属性,并且给它赋了一个百分比的属性值,结果页面的出了一点问题.

下面做个实验:

这个是html代码

    <div class="out1">        <div class="inner1">            margin: 50px 100px;        </div>    </div>    <div class="out2">        <div class="inner2">            margin: 25% 25%;        </div>    </div>

这个是css代码

    .out1, .out2{        border: 1px solid #000;        background-color: #ccc;        width: 400px;        height: 200px;    }    .inner1, .inner2{        width: :200px;        height: 100px;        background-color: #e2e3e4;    }    .inner1{        margin: 50px 100px;    }    .inner2{        margin: 25% 25%;    }

外层容器的宽高都一样,inner1和inner2除了margin属性不一样,其他属性都一样,如果按照我以前认为的计算方式,magin-top的百分比是按照父元素的高度决定,那么两个div的表现应该一致,但是结果下图所示

inner2的matgin-top足足有100px!
后来查阅资料了解到:margin-top百分比的计算是按照父元素的宽度来计算的,即400*25%=100px.

算踩了一个坑,写篇文章记载,免得以后再次踩坑