margin-top影响父级元素位置

子元素的margin-top将父级元素也产生边距,导致这个问题的原因是,父级元素不具有一个完整的包裹性,使子元素不能找到父级元素的border或者padding;
css规定：

所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

代码如下：

`<style>
    *{
        padding:0;
        margin:0;
    }
    body,html {
        height:100%;
    }
    #content {
        width:100%;
        height: 100%;
        background: #be353533;
        text-align: center;
        overflow:hidden
    }
    .loginBox{
        margin:30px auto;
        width:20%;
        height:20%;
        background: #fff;
    }
</style
<div id='content'>
    <div class='loginBox'>
        
    </div>
</div>`

实现效果：

想要效果：

处理方法:
1.给父级元素添加overflow:hidden;
2.给父级元素添加border;
3.给父级元素添加padding;
4.给父级元素添加position;