首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 ><网页布局>解决margin-top塌陷,实现子元素动态改变父元素尺寸1.伪类解决margin-top塌陷:2.浮动子元素动态改变父元素宽度:

<网页布局>解决margin-top塌陷,实现子元素动态改变父元素尺寸1.伪类解决margin-top塌陷:2.浮动子元素动态改变父元素宽度:

作者头像
zhaoolee
发布2018-04-19 10:33:47
1.6K0
发布2018-04-19 10:33:47
举报
文章被收录于专栏:木子昭的博客木子昭的博客

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;
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.09.10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.伪类解决margin-top塌陷:
  • 2.浮动子元素动态改变父元素宽度:
    • 小结:
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档