不为人知的margin负值的应用

最新推荐文章于 2024-08-24 17:13:38 发布

冬天爱吃冰淇淋

最新推荐文章于 2024-08-24 17:13:38 发布

阅读量669

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_44823731/article/details/108213249

版权

h5 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

9 篇文章 1 订阅

订阅专栏

margin的负值的情况分为两种：

margin-left、margin-top：当这两个的属性值为负值的时候，自身会根据负值的大小来向左和上方向偏移。
margin-right、margin-bottom：当这两个的属性值为负值的时候，自身的位置不会发生改变，但是会影响自己身后的元素。这两个为负值，相当于自己的宽度缩小（宽度缩小是表示自己占用的宽度变小，但是不会影响自身元素的显示。当负值到达-100%的时候，自身的就不占用宽度，如果由于宽度不够而导致的换行，就会偏移到原来的位置），导致后续的元素向自己偏移；
margin-right为-100%的例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            padding: 0 200px;
            background-color: #333;
        }

        .left {
            float: left;
            width: 100%;
            background-color: yellow;
        }

        .right {
            float: left;
            width: 200px;
            margin-right: -100%;
            background-color: red;
        }

        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="left">this is left</div>
        <div class="right">this is right</div>
    </div>
</body>

</html>

布局介绍：box盒子装着left和right这两个盒子，left和right使用左浮动。box盒子左右的padding是200px。left的盒子的width是100%。
right未加margin-right: -100%的效果：
在这里插入图片描述
加上之后：

解释：由于box的宽度容不下left和right两个盒子，所以right盒子换行。但当right盒子加上margin-right: -100%之后，right盒子占用的宽度相当于0，但不影响他显示。所以就不用换行，回到了一行上。

实战，使用margin负值的原理来实现圣杯布局：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        text-align: center;
    }

    body {
        min-width: 600px;
    }

    #header {
        width: 100%;
        background-color: #f1f1f1;

    }

    #container {
        padding: 0 200px 0 100px;
        background-color: #333;
    }

    #left {
        position: relative;
        width: 100px;
        margin-left: -100%;
        right: 100px;
        background-color: #ffff00;
    }

    #right {
        width: 200px;
        margin-right: -200px;
        background-color: #ff0000;
    }

    #center {
        width: 100%;
        background-color: green;
    }

    .column {
        float: left;
    }

    #footer {
        background-color: #f1f1f1;
    }

    .clearfix::after {
        content: '';
        display: table;
        clear: both;
    }
</style>

<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>

</html>

效果图：
在这里插入图片描述
解释：我们重点是关注中间的盒子布局，html的结构顺序是center、left、right。
我们为container容器设置一个左右padding值，center、left、right设置左浮动，center的宽度设为100%，然后left和right就由于宽度不够而换行。效果图如下：
在这里插入图片描述

这时我们为left盒子设置margin-left: -100%,这样设置之后，left盒子就和center盒子的头部重合
在这里插入图片描述
再为left盒子使用position: relative; right: 100px，100px是container的左内边距的宽度。效果如下:

设置right的宽度为container的右内边距的宽度，为right盒子设置margin-right：-200px，200px是container盒子的右内边距。这样就完成了。
在这里插入图片描述