再谈margin负值原理

最新推荐文章于 2022-03-28 18:04:51 发布

weixin_30776545

最新推荐文章于 2022-03-28 18:04:51 发布

阅读量111

点赞数

原文链接：http://www.cnblogs.com/godot-blog/p/6520308.html

版权

前言

前几天写了一篇关于 margin负值的博文，以为理解了其中的奥秘，但是今天把《css权威指南》中关于外边距的一章看了一遍，发现还是有不能理解的地方，所以特此更一篇博文，解答自己的疑惑~

普通文档流中的margin负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin-负值</title>
    <style>
        .div1,
        .div2{
            width:400px;
            height: 150px;
            color:red;
        }
        .div1{
            background: #40a;
            
        }
        .div2{
            background:rgba(0,1,0,.5);
        }
    </style>
</head>
<body>
    <div class="div1">
        div1 margin对普通文档流的影响 对普通文档流的影响 对普通文档流的影响
    </div>
    <div class="div2">div2 margin对普通文档流的影响 margin对普通文档流的影响</div>
</body>
</html>

效果：

普通文档流中的元素在页面中的位置是根据文档流的变化而变化的。负边距会使在文档流中的元素发生偏移，这种偏移与相对定位不同的是**元素不再占有偏移前的空间，所以，文档流中其他元素会“流”过来，填补空白。

给两个div增加负边距之后：

.div1,
.div2{
    width:400px;
    height: 150px;
    margin: -25px; 
    color:red;
        }

效果：

由效果可知：两个div都向上,向左移动了25px，但是负边距并没有减小元素在文档流的尺寸，只是在计算元素位置时，会认为负边距减少了元素的尺寸。

接下来，看另外一个例子~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margain-demo2</title>
    <style>
    .div3{
        width: 300px;
        /*注意 父容器并没有设置高度，高度由内容决定*/
        border: 4px solid #8ad;
                /*overflow: hidden;*/

    }

    .div4,.div5{
        /*两个子元素设置了高度和宽度*/
        width: 300px;
        height: 200px;
        
    }
    .div4{
        background:#eee;
    }
    .div5{
        background:rgba(1,0,0,.3);              margin-bottom: -20px;
    }
    </style>
</head>
<body>
    <div class="div3">
    <div class="div4">div4</div>
    <div class="div5">div5</div>
    </div>
</body>
</html>

注意父容器并没有设置高度，高度由内容决定
效果：
div5不加margin-bottom: -20px;属性前：

添加之后：

可见，父容器的高度变小！
也就是说margin-bottom为负数会影响未设定高度父元素的高度，子元素自身的高度不变

在IE8+以及那些标准浏览器中，给父元素添加一个overflow:hidden;的属性
因为父元素的高度变了，但子元素的高度没有发生改变，所以需要使子元素超出隐藏。如下图：

所以，在文档流中，元素的“边界”由margin决定，margin为负值时，“边界”向里收，文档流只认边界,而不是元素的实际尺寸。

负边距对元素宽度的影响

前提：没有设定元素的width属性

.div6{
        width: 400px;
        border: 4px solid #8ad;
        margin: 0 auto;
    }
    .div7{
        height: 200px;
        background:rgba(1,0,0,.3);
        margin: 0 -100px;   
              }

<div class="div6"><div class="div7">div7</div></div>

效果:

margin-right/margin-left为负值，父元素指定了宽度的情况下子元素也会把自身拉长

补充

通过给浮动元素设定margin负值也能导致元素之间存在覆盖

负数margin对于绝对定位元素的影响主要有：利用绝对定位元素来实现元素垂直水平居中，不过这种居中的实现依然要知道元素本身的尺寸!
absolute定位与margin定位其实是没有什么冲突的，无论absolute元素是否设置了left/top值，其margin属性值都是可以起作用的!

总结

除了父元素指定了宽度，而子元素通过margin-right/margin-lef负值改变了元素自身的大小这种情况，margin-left/margin-right/margin-bottom/margin-top并不会改变元素本身的大小。margin-left为负数只会导致元素往左边移动，margin-top为负数是往上移动，而margin-bottom会改变元素的逻辑大小，使得后面的元素可能会覆盖元素自身(但是不会覆盖元素的border);margin-right也仅仅是修改元素的右边界，使得后续的元素可能覆盖元素自身!

转载于:https://www.cnblogs.com/godot-blog/p/6520308.html