盒子模型的margin负数用法

最新推荐文章于 2021-11-02 16:07:53 发布

weixin_30549175

最新推荐文章于 2021-11-02 16:07:53 发布

阅读量317

点赞数

原文链接：http://www.cnblogs.com/mugglean/p/9150717.html

版权

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

转载于:https://www.cnblogs.com/mugglean/p/9150717.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30549175

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型的margin负数用法

　　盒子的margin用法大家都应该很清楚，在实际中一般使用margin来水平居中或者让自己移动相应的位置，但是margin给负数在实际中也是有用的。　　如图为两个浮动的盒子。　　给左边的盒子margin-left: -50px;后如图所示　　如图，蓝色盒子移动了，但是粉色盒子自身只是被压住了，并没有移动。　　代码如下<!DOCTYPE html>&...
复制链接

扫一扫