margin层叠情况，及表现

最新推荐文章于 2023-02-05 16:03:14 发布

胡杨泪

最新推荐文章于 2023-02-05 16:03:14 发布

阅读量416

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u011220611/article/details/54619965

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
margin层叠情况，及表现

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-Typ
复制链接

扫一扫