首页 > 其他 > 详细

margin重叠现象

时间:2019-03-01 22:13:27      阅读:157      评论:0      收藏:0      [点我收藏+]

 

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

例如:1普通元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习(margin重叠现象)</title>
    <style>
                  #test1{
                      height: 100px;
                      background: blue;
                      margin-bottom: 50px;
                  }
                  #test2{
                      height: 100px;
                      background: green;
                      margin-top:50px; 
                  }
    </style>
</head>
<body>
    <div id="test1"></div>
    
    <div id="test2"></div>
</body>
</html>

技术分享图片

2,浮动元素:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习(margin重叠现象)</title>
    <style>
                  #test1{
                      height: 100px;
                    width: 200px;
                      background: blue;
                    margin-bottom: 50px;
                    float: left;
                  }
                  #test2{
                      height: 100px;
                    width: 200px;
                      background: green;
                       float: left;
                     clear: left;
                      margin-top:50px; 
                  }
    </style>
</head>
<body>
    <div id="test1"></div>
        <div id="test2"></div>
    
</body>
</html>

技术分享图片

3,父子(普通元素)发生margin重叠现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习(margin重叠现象)</title>
    <style>
                  #test1{
                      height: 150px;
                    width: 200px;
                      background: blue;

                   
                  }
                  #test2{
                      height: 50px;
                    width: 50px;
                      background: green;
                      
                      margin-bottom:50px; 
                  }
                  #test3{
                    height: 50px;
                    width: 50px;
                    background: green;
                    margin-top: 50px;
                  }
    </style>
</head>
<body>
    <div id="test1">
        <div id="test2"></div>
        <div id="test3"></div>
    </div>
</body>
</html>

技术分享图片

4,父子(子为浮动元素)不发生margin重叠

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习(margin重叠现象)</title>
    <style>
                  #test1{
                      height: 150px;
                    width: 200px;
                      background: blue;

                   
                  }
                  #test2{
                      height: 50px;
                    width: 50px;
                      background: green;
                      float: left;
                      margin-bottom:50px; 
                  }
                  #test3{
                    height: 50px;
                    width: 50px;
                    background: green;
                    float: left;
                    clear: left;
                    margin-top: 50px;
                  }
    </style>
</head>
<body>
    <div id="test1">
        <div id="test2"></div>
        <div id="test3"></div>
    </div>
</body>
</html>

技术分享图片

 

margin重叠现象

原文:https://www.cnblogs.com/lq13035130506/p/10459008.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!