margin为负值怎么解释？

最新推荐文章于 2021-03-26 17:08:05 发布

豆子前端

最新推荐文章于 2021-03-26 17:08:05 发布

阅读量3k

点赞数 7

分类专栏：前端文章标签： css html css3 html5

本文链接：https://blog.csdn.net/qq_41996454/article/details/108896837

版权

前端专栏收录该内容

175 篇文章 11 订阅

订阅专栏

文章目录

前言
margin四值顺序
margin表现
margin为负值

前言

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>

豆子前端

关注

7
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫