图片 6

margin

IE 6 援救 margin-top 为负数,但不扶助 margin-left 不援助负数。

前言

今天写了黄金年代篇有关
margin负值的博文,认为明白了里面包车型地铁深邃,可是后天把《css权威指南》中有关外边距的意气风发章看了叁回,开掘依然有无法明了的地点,所以有意更意气风发篇博文,解答本身的纠缠~

margin

消除办法

平日性文书档案流中的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>

效果:
图片 1

日常来讲文书档案流中的成分在页面中的地点是依靠文书档案流的变迁而变化的。负边距会使在文书档案流中的成分发生偏移,这种偏移与相对固定分歧的是**要素不再据有偏移前的半空中,所以,文书档案流中任何成分会“流”过来,增补空白。

给四个div扩展负边距之后:

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

效果:
图片 2

由作用可以看到:五个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;属性前:
图片 3
加上从此今后:
图片 4
可见,父容器的惊人变小!
也便是说margin-bottom为负数会潜濡默化未设定中度父成分的万丈,子成分本身的高度不变

在IE8+以至那么些专门的职业浏览器中,给父成分加多一个overflow:hidden;的属性
因为父成分的莫斯中国科学技术大学学变了,但子成分的可观未有爆发退换,所以须要使子成分超过隐蔽。如下图:
图片 5

由此,在文书档案流中,成分的“边界”由margin决定,margin为负值时,“边界”向里收,文书档案流只认边界,并非因素的莫过于尺寸。

margin概念####

margin属性给钦赐成分上下左右两个样子设置异乡距(即钦命成分间距其前后左右要素的离开)。
margin是margin-top,margin-right,margin-bottom和margin-left的缩写。

为要钦点 margin-left 为负值的要素钦定 zoom:1;也许钦赐宽度。

负边距对成分宽度的熏陶

前提:没有设定成分的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>

效果:
图片 6

margin-right/margin-left为负值,父成分钦点了宽度的气象下子成分也会把小编扩张

margin取值####

margin起头值为margin:0;
<length>叁个定点的数,可感到负数;
<percentage> 百分比,可感觉负数(满含该块的要素的上升的幅度);
auto 适当的值,能够用来使叁个块成分水平居中。
当margin只有贰个值时,功效于八个边;
当margin有七个值时,第叁个值成效于上下,第三个值功用于左右;
当margin有多个值时,第一个值功能于上,第三个值成效于左右,第二个值作用于下;
当margin有四个值时,依次遵照上右下左的相继相配(顺时针)。

补充

通过给变迁成分设定margin负值也能形成成分之间存在覆盖

负数margin对于纯属定位成分的影响首要有:利用相对定位成分来贯彻要素垂直水平居中,不过这种居中的兑现依旧要领悟要素本人的尺码!
absolute定位与margin定位其实是一直不什么冲突的,无论absolute元素是不是设置了left/top值,其margin属性值都是能够起效果的!

负margin####
  1. 使和谐位移: margin-left/top:-10px;将协和向左/上移步10像素;
  2. 使周边成分位移:margin-right/bottom:-10px;
  3. 使成分宽度扩充(前提该因素未有设定宽度)。

总结

除了父成分钦定了大幅度,而子元素通过margin-right/margin-lef负值改换了成分自个儿的尺寸这种状态,margin-left/margin-right/margin-bottom/margin-top并不会纠正成分本人的朗朗上口。margin-left为负数只会促成成分往左侧移动,margin-top为负数是往上移步,而margin-bottom会改换成分的逻辑大小,使得末端的要素大概会覆盖成分本身(不过不会覆盖成分的border卡塔尔;margin-right也无非是改进成分的左侧界,使得后续的要素可能覆盖成分本身!

margin合并####

1.当四个垂直外边距相遇时,它们将变成一个外乡距。合併后的异乡距的惊人等于多少个发生合并的内地距的可观中的非常的大者。
2.当二个成分包涵在另二个因素中时(前提是外面包车型客车因素未有border且未有padding),它们的上和/或下外边距也会爆发归拢。
3.当贰个空成分且并未有边框可是有外地距top与bottom,在这里种情景下,上海艺术大学地距与下外边距也会产生归总。

注:独有日常文书档案流中块框的垂直外边距才会产生外边距归拢。行内框、浮动框或相对定位之间的异乡距不会合併。

block与inline成分中的margin####

margin在块级成分下,上下左右随机设定。
margin应用在内联成分上,上下无效力,左右可设定。

发表评论

电子邮件地址不会被公开。 必填项已用*标注