HTML网页开发学习笔记（燕十八）-20 margin重叠

最新推荐文章于 2023-07-14 14:32:25 发布

kexin_power

最新推荐文章于 2023-07-14 14:32:25 发布

阅读量1k

点赞数

分类专栏： html学习笔记文章标签： html

本文链接：https://blog.csdn.net/kexin_power/article/details/51889809

版权

html学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

作业：
测试并描述margin重叠的发生条件及现象，并自行搜索父子div也会发生margin重叠，写出代码和效果图

总结：
1.上下/左右相邻的普通元素margin，不是两者相加之和，而是取最大值，这个现象叫做margin重叠。
2. 普通元素才会发生margin重叠，如果是float元素，就不会发生。margin是两者相加之和。

margin重叠代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>20 margin 重叠现象研究</title>
<style>
    #father{
        width:500px;
        height:500px;
        background: grey;
    }
    .child{
        width: 200px;
        height: 200px;
        margin: 50px;
        background: green;
        /*float:left;*/
    }   
</style>
</head>
<body>
    <div id="father">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

运行效果图如下：
上下相邻元素margin重叠

float元素不发生margin重叠

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>20 margin 重叠现象研究</title>
<style>
    #father{
        width:500px;
        height:500px;
        background: grey;
    }
    .child{
        width: 200px;
        height: 200px;
        margin: 50px;
        background: green;
        float:left;
    }   
</style>
</head>
<body>
    <div id="father">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

运行效果图如下所示：
不重叠

父子divmargin重叠

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>20 margin 重叠现象研究</title>
<style>
    #father{
        width:500px;
        height:500px;
        background: grey;
        margin:100px;
    }
    #child1{
        width: 100px;
        height: 100px;
        background: red;
/*      float:left;*/
        margin:50px;
    }
    #child2{
        width: 100px;
        height: 100px;
        background: green;
        margin:50px;
/*      float:left;*/
    }   
</style>
</head>
<body>
    <div id="father">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>
</html>

运行结果如图
这里写图片描述

父子div + float ，不发生margin重叠

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>20 margin 重叠现象研究</title>
<style>
    #father{
        width:500px;
        height:500px;
        background: grey;
        margin:100px;
    }
    #child1{
        width: 100px;
        height: 100px;
        background: red;
        float:left;
        margin:50px;
    }
    #child2{
        width: 100px;
        height: 100px;
        background: green;
        margin:50px;
        float:left;
    }   
</style>
</head>
<body>
    <div id="father">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>
</html>