margin层叠情况，及表现

来源：互联网发布：知豆汽车能开几年编辑：程序博客网时间：2024/04/30 01:07

1.上下/左右相邻的普通元素margin，不是两者相加之和，而是取最大值，这个现象叫做margin重叠。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>用div来占布局</title>  <script type="text/javascript" src="http://www3.lenovo.com/_ui/desktop/common/js/jquery/jquery-1.11.2.min.js"></script>  <style>    .div1,.div2{        width:100px;        height:100px;        background-color:red;        margin:20px;        /*float:left;        clear:left;*/    }  </style> </head> <body>    <div class="div1"></div>    <div class="div2"></div>    <script>    </script> </body></html>

2.普通元素才会发生margin重叠，如果是float元素，就不会发生。margin是两者相加之和

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>用div来占布局</title>  <script type="text/javascript" src="http://www3.lenovo.com/_ui/desktop/common/js/jquery/jquery-1.11.2.min.js"></script>  <style>    .div1,.div2{        width:100px;        height:100px;        background-color:red;        margin:20px;        float:left;        clear:left;    }  </style> </head> <body>    <div class="div1"></div>    <div class="div2"></div>    <script>    </script> </body></html>

这里写图片描述

3.父子元素，无浮动，发生重叠

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>用div来占布局</title>  <script type="text/javascript" src="http://www3.lenovo.com/_ui/desktop/common/js/jquery/jquery-1.11.2.min.js"></script>  <style>    .father{        width:400px;        height:400px;        background-color:gray;        margin:20px;    }    .child1{        width:100px;        height:100px;        background-color:red;        margin:20px;        /*float:left;*/    }    .child2{        width:100px;        height:100px;        background-color:red;        margin:30px;        /*float:left;*/    }  </style> </head> <body>    <div class="father">        <div class="child1"></div>        <div class="child2"></div>    </div>    <script>    </script> </body></html>

这里写图片描述

4.父子元素，无浮动，发生重叠

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>用div来占布局</title>  <script type="text/javascript" src="http://www3.lenovo.com/_ui/desktop/common/js/jquery/jquery-1.11.2.min.js"></script>  <style>    .father{        width:400px;        height:400px;        background-color:gray;        margin:20px;    }    .child1{        width:100px;        height:100px;        background-color:red;        margin:20px;        float:left;    }    .child2{        width:100px;        height:100px;        background-color:red;        margin:30px;        float:left;    }  </style> </head> <body>    <div class="father">        <div class="child1"></div>        <div class="child2"></div>    </div>    <script>    </script> </body></html>

这里写图片描述

他人总结：
http://www.cnblogs.com/yupire/p/5518266.html

0 0