margin的负值

将三个盒子的宽高都设置为100px，float都设置为left，那么它们会水平排列在一排

当我们给3设置一个margin-left：-50px时会发现它占据2号元素一半的位置，这是因为3号元素margin-left设置了负值使得3号元素像左边平移了50px。

 

 当给3号元素设置margin-left：-100px时，那么3号元素就会基于原来的位置向左边平移100px，这就使得3号元素完全覆盖了2号元素。

当给3号元素设置margin-left：-200px，那么3号元素就会基于原来的位置向左平移200px，此时会覆盖1号元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
.box1{
    background: red;
    float: left;
    width: 100px;
    height: 100px;
}
.box2{
    background: green;
    float: left;
        width: 100px;
    height: 100px;
}
.box3{
    background: yellow;
    float: left;
        width: 100px;
    height: 100px;

}
        </style>
    </head>
    <body>
<div class="box1">
1
</div>
<div class="box2">
2
</div>
<div class="box3">
3
</div>
    </body>
</html>

 

posted @ 2016-09-08 17:50  桃园  阅读(137)  评论(0)  编辑  收藏  举报