盒子模型的margin负数用法

　　盒子的margin用法大家都应该很清楚，在实际中一般使用margin来水平居中或者让自己移动相应的位置，但是margin给负数在实际中也是有用的。

　　如图为两个浮动的盒子。

　　给左边的盒子margin-left: -50px;后如图所示

　　如图，蓝色盒子移动了，但是粉色盒子自身只是被压住了，并没有移动。

　　代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin负数Demo</title>
    <style>
    *{
        padding: 0;
        margin: 0;
        /*清楚浏览器的默认效果以便看得清楚*/
    }
        .p1{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
/*            margin-left: -5px;*/
            margin-left: -50px;
        }
        .p2{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="p1"></div>
    <div class="p2"></div>
</body>
</html>

 

posted @ 2018-06-07 15:11  Mugglean  阅读(903)  评论(0)  编辑  收藏  举报