zoukankan html css js c++ java

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

查看全文

相关阅读:
CSS-16-margin值重叠问题
 CSS-15-定位
 CSS-14-浮动
 CSS-13-块级元素和行内元素
 CSS-12-盒子模型
 CSS-11-外边距
 CSS-10-内边距
 CSS-09-背景属性
 CSS-08-边框属性设置
 CSS-07-CSS文本设置

原文地址：https://www.cnblogs.com/mugglean/p/9150717.html