(6)关于margin的一些想法1.0

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
    .box{
            width:400px;
            height:400px;
            background:red;
            padding-top:1px;
            
    }
    
    .a{
            height:100px;
            width:100px;
            background:green;
            margin-top:0px;
            margin-left:20px;
                    /*  (1)在这里，如果没有设置浮动，则margin-right无效。
                        (2)若要使margin-right生效，则浮动方向必须与margin-right一致
                            ，此时margin-left无效。
                        */
            margin-bottom:-80px;
    }
    .b{
            height:100px;
            width:100px;
            background:black;
            margin-top:100px;
            /*a的margin-bottom与b的margin-top如果都为正数或者
            都为负数，
            则a,b之间的垂直距离那个大，实际上便显示的是哪个
                若其中只有有一个为负值，则看他们相加之后的值。
                  差值为正数，则就是b的顶部距离a的底部为那个差值。
                  差值为负数，则就是b在a的底部上升那个负数的绝对值。
              */
    }
    .foot{
        width:400px;
        height:5px;
        background:blue;
        
    }
</style>
</head>

<body>


<div class=box>
            <div class="a"></div>
            <div class="b"></div>
            </div>
            
            <div class="foot"></div>
</body>
</html>

　　box最后的显示大小等于box的border及border内的大小加上正的margin值。而负的
margin值不会影响box的实际大小。如果是负的top或left值会引起box的向上或向左位置
移动。如果是bottom或right只会影响下面box的显示的参考线。　

 

　　　　　　box的实际大小=box的物理大小+正的margin 

　　　

即，        　　　

　　　　　　top,left与自身的位置有关。

　　　　　　right,bottom与下一个相邻元素的位置有关。

posted @ 2017-04-16 17:04  我爱米稀饭  阅读(118)  评论(0)  编辑  收藏  举报