盒子模型的margin负数用法

2018-06-24 02:26:56来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  盒子的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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:课时41.表格的结构(了解)

下一篇:课时43.表格练习