CSS-定位6-负边距

2022-06-07 06:50:55

1、margin 负边距

负边距，不会脱离文档流，但后续原素会占用元素空间。

2、负边距与垂直方向元素

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负边距与垂直方向的元素</title>
    <style type="text/css">
        .div1{
            background: red;
            width: 210px;
            height: 300px;
        }
        .div2{
            background: blue;
            width: 200px;
            height: 100px;
            margin-top: -240px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <p>div2 设置负边距，div3也会跟随div2持续移动
    <br>该特性与水平方向的不一致，水平方向div3触碰div1就会停止移动<p>
    <div class="div1">div1 red <br>height300px,</div>
    <div class="div2">div2 blue <br>margin-top:-240px</div>
    <div class="div3">div3 yellow</div>
</body>
</html>

运行效果：

垂直方向负边距

3、负边距与内边距

内边距展开元素，外边距收缩元素。元素占用空间被撑大，其他元素位置不会受到影响。
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负边距与内边距</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
         
        .div1{
            background: red;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: blue;
            width: 300px;
            height: 100px;
            padding-bottom: 300px;
            margin-bottom:-300px;

        }
        .div3{
            background: yellow;
            width: 100px;
            height: 100px;
        }
        .div4{
            background: green;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="div1">div1 red</div>
    <div class="div2">
            div2 blue;通过以下两个属性<br>
            padding-bottom: 300px;<br/>
            margin-bottom:-300px;<br/>
            撑高盒子而不改变其他盒子的位置。

    </div>
    <div class="div3">div3 yellow</div>
    <div class="div4">div4 green</div>
</body>
</html>

运行效果：
div2 被分割成两个部分，元素变大，div3和div4位置未受到影响。

内边距展开元素，外边距收缩元素。元素占用空间变大

利用此特性，填充父元素
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负边距与内边距</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .div1{
            width: 400px;
            height: 200px;
            border: 1px solid red;
            margin: 20px auto;
            overflow: hidden;
        }
        .div2{
            background: red;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">
            div2利用<br/>
            padding-bottom: 9999px;<br/>
            margin-bottom: -9999px;<br/>
            沾满整个父div。
        </div>
    </div>
      
</body>
</html>

运行效果：

内边距展开元素，外边距收缩元素。元素占用空间变大,填充父元素

4、负边距与浮动-基础

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Margin负边距</title>
    <style type="text/css">
        div{
            float: left;
            height: 100px;
        }
        .div1{
            width: 100px;
            background: red;
        }   
        .div2{
            width: 100px;
            background: blue;
            margin-left: -50px;
        } 
        .div3{
            width: 100px;
            background: yellow;
        }          
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

运行效果： div2设置了负边距，div2占用了div1位置，同时div3位置向前移动。

基础负边距

5、负边距与浮动-元素持续前移

如果把div2的margin-left:-150px,div3与div1相遇，不会持续前进。div3不会跟着div2持续迁移。如果div3想持续前移，需要设置div3的负边距后，才有效。

负边距持续前移

6、负边距与浮动-换行

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Margin负边距跨行</title>
    <style type="text/css">
        div{
            float: left;
            height: 100px;
        }
        .div1{
            width: 100%;
            background: red;
        }   
        .div2{
            width: 100px;
            background: blue;
            margin-left: -200px;
        } 
        .div3{
            width: 100px;
            background: yellow;
        }          
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

运行结果：
浮动排列的盒子，盒子的负边距达到一定程度，会引起元素定位到上一行。div2元素负边距超过了自身盒子总宽度，并且div2原本在第二行距离左边0px，因此div2会向上漂浮，div3漂浮到距离第二行左边界0px。
如果让div3向上漂浮呢，参照定位
需要设置div3的负边距为自身盒子总宽度。div3的参照的位置，是div2漂浮后，div3所在的位置

负边距与换行

码农公寓