《网页布局技巧》解决margin-top塌陷,实现子元素动态改变父元素尺寸

访问量: 206

title: 《网页布局技巧》解决margin-top塌陷,实现子元素动态改变父元素尺寸

1.伪类解决margin-top塌陷:

如果两个不浮动的盒子相互嵌套,对内部的盒子设置margin-top会导致属性被自动转移到外部的盒子上,导致内部盒子的margin-top设置失败最靠谱的解决方式是为父元素添加一个伪类:
/*伪类解决margin-top塌陷*/
.clearfix:before{
    content:"";
    display: table;
}

解决margin-top塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin-top塌陷</title>
    <style>
        body, a, p{
            margin:0;
            padding:0;
        }
        .outside{
            width:300px;
            height: 400px;
            background-color: green;
            margin: 0 auto;
        }
        .inside{
            width: 50px;
            height:50px;
            background-color: gold;
            margin-top: 50px;
        }
        /*伪类解决margin-top塌陷*/
        .clearfix:before{
            content:"";
            display: table;
        }
    </style>
</head>
<body>

<div class="outside clearfix">

    <div class="inside">

    </div>

</div>

</body>
</html>

2.浮动子元素动态改变父元素宽度:

在设计网页布局时,为了便于快速布局,会将子元素设为浮动元素,父元素宽度设为固定,高度不设置,这样随着子元素的添加,父元素的高度就会动态变化,但尴尬的是,浮动子元素并不能”撑开父元素的高度”,于是为父元素增加伪类便成了解决这种尴尬局面最好的方式;
.clearfix:after{
    content: "";
    display: table;

    clear:both;
}

子元素动态改变父元素尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动子元素宽度</title>

    <style>

        .outside{
            width: 200px;
            border: 2px solid red;
        }
        .inside{
            float: left;

            width: 200px;
            height: 100px;
            margin: 20px 0 20px;
            border: 1px solid green;
        }
        .clearfix:after{
            content: "";
            display: table;

            clear:both;
        }
    </style>
</head>
<body>

<div class="outside clearfix">
    <div class="inside">
    </div>
    <div class="inside">
    </div>

</div>


</body>
</html>

小结:

以上两种情况极其常见,解决方式也很类似,所以可对两种方式做一个封装:

.clearfix:before, .clearfix:after{
    content: "";
    display: table;
}

.clearfix:after{

    clear:both;
}

/*适配非主流浏览器(IE浏览器)*/

.clearfix{

    zoom:1;

}

以后遇到上面两种问题,只要将 小结 中的源码引入到对应的css(层叠样式表),最后在父元素class属性中 中引入clearfix即可

<div class="outside clearfix">
    <div class="inside">
    </div>
    <div class="inside">
    </div>

</div>

reset.css

h1,h2,h3,h4,h5,h6,p,body,ul,ol,dl,dd,dt,input{
    /*去掉默认样式*/
    margin: 0;
    padding: 0;
}

ul,ol{
    /*去掉左边的点或者数字*/
    list-style: none;
}

a{
    /*去掉下划线*/
    text-decoration: none;
}

em,i{
    /*去掉斜体*/
    font-style: normal;
}

b,strong{
    /*去掉加粗*/
    font-weight: normal;
}


/*清除浮动影响 和清除margintop塌陷 合在一起的写法*/
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}

.clearfix:after{
    clear: both;
}

.clearfix{
    /*兼容ie*/
    zoom:1;
}

本文永久更新地址(欢迎来读留言,写评论):

https://www.v2fy.com/p/2020-12-26-margin-top-1609042169000