margin为负值怎么解释？

前言margin四值顺序margin表现margin为负值1.margin-left,margin-right为负值元素本身没有宽度元素本身有宽度2.margin-top为负值3.margin-bottom为负值

前言

margin设置为负值往往用于实现双飞翼布局、圣杯布局中。我本人对这些布局实现的原理还有点懵，故整理一下margin为负值的情况。

margin四值顺序

【1个值】margin: top|right|bottom|left;
【2个值】margin: top|bottom left|right;
【3个值】margin: top left|right bottom;
【4个值】margin: top right bottom left;

margin表现

block元素可以使用四个方向的margin值
inline元素使用上下方向的margin值无效
inline-block使用上下方向的margin负值看上去无效

margin为负值

现有如下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            background-color: yellow;
            width: 800px;
            margin: 100px auto 0;
            height: 300px;
            font-size: 30px;
        }

        .box {
            background-color: green;
            /*margin-left: -100px;*/
            height: 200px;
        }
    </style>
</head>
<body>
<div class="wrap">
    最外层的宽度为800px
    <div class="box">里层的元素</div>
</div>
</body>
</html>

效果如下：

1.margin-left,margin-right为负值

元素本身没有宽度

元素本身没有宽度，此时会增加元素宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            background-color: yellow;
            width: 800px;
            margin: 100px auto 0;
            height: 300px;
            font-size: 30px;
        }

        .box {
            background-color: green;
            margin-left: -100px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="wrap">
    最外层的宽度为800px
    <div class="box">里层的元素设置了margin-left:-100px</div>
</div>
</body>
</html>

元素本身有宽度

元素本身有宽度，会产生位移

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>验证</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            background-color: yellow;
            width: 800px;
            margin: 100px auto 0;
            height: 300px;
            font-size: 30px;
        }

        .box {
            background-color: green;
            width: 700px;
            margin-left: -100px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="wrap">
    最外层的宽度为800px
    <div class="box">里层定宽的元素设置了margin-left:-100px</div>
</div>
</body>
</html>

2.margin-top为负值

不管是否设置高度，都不会增加高度，而是会产生向上的位移

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>验证</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            background-color: yellow;
            width: 800px;
            margin: 100px auto 0;
            height: 300px;
            font-size: 30px;
            z-index: 9;
        }

        .box {
            background-color: green;
            /*向上偏移*/
            margin-top: -100px;

            /*height: 30px;*/
        }
    </style>
</head>
<body>
<div class="wrap">
    最外层的宽度为800px
    <div class="box">里层的元素设置了margin-top:-100px</div>
</div>
</body>
</html>

100px的距离如下图高度所示。

3.margin-bottom为负值

不会位移,而是会减少自身供css读取的高度.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>验证</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            background-color: yellow;
            margin-top: 100px;
            margin-bottom: -300px;
            height: 200px;
        }

        .t {
            background-color: red;
            height: 20px;
        }
    </style>
</head>
<body>
<div class="box">高度为200px</div>
<div class="t">高度为20px</div>
</body>
</html>