豁然高

导航

css margin负值

margin,外边距,就是设置元素的从边框最外边缘向外(正值)或者内(负值)的延申的距离。

margin是完全透明的,看不见的。但它是元素之间的边界

  margin的边界线是两个元素之间真正的边界线。

  元素的外部边界线就是元素的margin边界线。元素的内部边界想就是元素的padding边界线(或者说是内容区的边界线,两者重叠)

  所以,两个并列元素的边界线就是两个元素的margin边界线,父元素与子元素的边界线就是父元素内容区的边界和子元素的margin边界

margin为正值的时候比较好理解。主要说一下margin为负值的时候现象

标准文档流中,一般情况下元素是默认向左向上流动的,直到遇到边界线。

float元素按照流向会分为向左流动或者向右流动,如果流动元素前面的元素也是流动元素且位于上一行,那么该元素也可能会向上浮动(可以看后面的浮动实例),

 元素margin负值的行为总结

先移动margin边界,然后根据元素的流向规律或者auto规律来移动和扩充元素,直到因为负值移动后的边界再次与其他元素的边界重合。

浮动元素因为margin负值移动到父元素边界外,且前一行也是浮动元素时,还会向上浮动

所有的流动元素其实都是行内块可以看作一行,只不过时超过父元素宽度时会自动换行

 

具体分析如下。

1.普通文档流,没有浮动,也没有定位(position:static 默认值)时。

效果表现一般为

当设置负值的 margin 的方向为 top 或者 left 的时候,元素会按照设置的方向移动相应的距离。

当设置负值的 margin 的方向为 bottom 或者 right 的时候,元素本身并不会移动,元素后面的其他元素会往该元素的方向移动相应的距离,并且覆盖在该元素上面。

在元素不指定宽度的情况下,如果设置 margin-left 或者 margin-right 为负值的话,会在元素对应的方向上增加其宽度。效果就和设置 padding-left 或者 padding-right 一样。

实例1

html代码

    <body >
        <div id="d1">
            <div id="d2">
            </div>
        </div>
    </body>

css代码1

            #d1 {
                background: green;
                border: 1px solid pink;
                width:200px;
                height: 200px;
                margin: 100px auto;
            }
            #d2 {
                background: gold;
                border: 1px solid rgb(219, 192, 255);
                width:100px;
                height: 100px;
            }

css代码1效果图

 

 css代码2,d2的margin-left设为-50px

            #d1 {
                background: green;
                border: 1px solid pink;
                width:200px;
                height: 200px;
                margin: 100px auto;
            }
            #d2 {
                background: gold;
                border: 1px solid rgb(219, 192, 255);
                width:100px;
                height: 100px;
                margin-left: -50px;
            }

css代码2的效果图

     

 

 

 

 css代码2的效果图比css代码1看上去其实向左移动了50px。

这是为什么呢?

margin的负值时,是从边框的最外边向内延申的,也即是说margin-left:-50时,margin-left的边界线是位于黄色块左边框的右边的,就如右侧的图,。而子元素的真正的边界就是margin的边界线。所以黄色块的元素就会向左流动,直到遇到父元素的内边界,也就是左侧的效果图。

实例2

再举个margin-bottom为负值的例子

    <body >
        <div id="d1">
            <div id="d2">
            </div>
            <div id="d3">
            </div>
        </div>
    </body>

css代码1

            #d1 {
                background: green;
                border: 1px solid pink;
                width:200px;
                height: 200px;
                margin: 100px auto;
            }
            #d2 {
                background: gold;
                border: 1px solid rgb(219, 192, 255);
                width:100px;
                height: 100px;
            }
            #d3 {
                background: rgb(255, 0, 200);
                border: 1px solid rgb(219, 192, 255);
                width:50px;
                height: 50px;
            }

css代码1效果图

css代码2, 把黄色块的div的margin-bottom设为-50px

      

把黄色块的div的margin-bottom设为-50px,为社么粉色块会上去了呢?

把黄色块的div的margin-bottom设为-50px,如右图,margin下边界线跑到黄色块下边界上方去了。

而元素之间真正的边界是元素margin的边缘线,所以下方的粉色块就会向上流动,直到遇到黄色块的margin下边界为止。

也就得到了左边的效果图。

实例3

再举一个margin-right为负值的例子

html代码

    <body >
        <div id="d1">
            <div id="d2">
            </div>
        </div>
    </body>

css代码1

            #d1 {
                background: green;
                border: 1px solid pink;
                width:200px;
                height: 200px;
                margin: 100px auto;
                padding: 10px;
            }
            #d2 {
                background: gold;
                border: 1px solid rgb(219, 192, 255);
                height: 100px;
                margin-bottom: -50px;
            }

css代码1效果图

 

 css代码2,

            #d1 {
                background: green;
                border: 1px solid pink;
                width:200px;
                height: 200px;
                margin: 100px auto;
                padding: 10px;
            }
            #d2 {
                background: gold;
                border: 1px solid rgb(219, 192, 255);
                height: 100px;
                margin-right: -100px;
            }

css代码2效果图

  

为什么设置margin-right为-100,会使黄色块加长了100px呢?

margin-right为-100px,如右图所示,margin-right的边界线就向内移动了100px。

而黄色div未设置宽度,默认就是auto,而auto就是使元素的margin边界自动填充到父元素的内容区,所以通过负值跑到里边的margin-right边界线又被自动扩充到父元素右侧内容区的边界,所以看上去就是黄色块加长了

 

 2.元素没有浮动但是定位为relative时

   和第一种情况差不多,唯一的区别是,如果产生元素重叠,那么relative元素位于上面,即使是后面的元素也一样 。

  而第一种情况是后面的元素会位于上面

 

3.元素没有浮动但是定位为absolute

由于设置绝对定位的元素已经脱离了标准文档流,所以元素margin设置负值只会对自身有影响,而不会对后面的元素有影响

效果表现为

当设置负值的 margin 的方向为 top 或者 left 的时候,元素也会按照设置的方向移动相应的距离。

设置的 margin 的方向为 bottom 或者 right

由于设置绝对定位的元素已经脱离了标准文档流,所以,设置 margin-right/bottom 对后面的元素并没有影响。

 

4.元素设置了浮动

如果设置的 margin 的方向与浮动的方向相同,那么,元素会往对应的方向移动对应的距离。

如果设置 margin 的方向与浮动的方向相反,则元素本身不动,元素之前或者之后的元素会向钙元素的方向移动相应的距离。

浮动元素不仅可以左右浮动,如果一个浮动元素的上一行也是浮动元素,则改元素通过margin-left或者margin-right负值整体移动到父元素边框以外时,就会自动向上浮动

实例

html代码

    <body >
        <div id="d1">
            <div id="d2">
            </div>
            <div id="d3">
            </div>
            <div id="d4">
            </div>
        </div>
    </body>

css代码1,为浮动前

            #d1 {
                background: green;
                border: 1px solid pink;
                width:400px;
                height: 400px;
                margin: 100px auto;
                padding: 10px;
            }
            #d2 {
                background: gold;
                border: 1px solid rgb(219, 192, 255);
                width:100%;
                height: 100px;
            }
            #d3 {
                background: rgb(255, 0, 200);
                border: 1px solid rgb(219, 192, 255);
                width: 100px;
                height: 100px;
            }
            #d4 {
                background: rgb(255, 0, 43);
                border: 1px solid rgb(80, 6, 176);
                width:50px;
                height: 50px;
            }

效果图

 

 css代码2, d3,d4左浮动

            #d1 {
                background: green;
                border: 1px solid pink;
                width:400px;
                height: 400px;
                margin: 100px auto;
                padding: 10px;
            }
            #d2 {
                background: gold;
                border: 1px solid rgb(219, 192, 255);
                width:100%;
                height: 100px;
            }
            #d3 {
                background: rgb(255, 0, 200);
                border: 1px solid rgb(219, 192, 255);
                width: 100px;
                height: 100px;
                float: left;
            }
            #d4 {
                background: rgb(255, 0, 43);
                border: 1px solid rgb(80, 6, 176);
                width:50px;
                height: 50px;
                float: left;
            }

效果图

 

 css代码3, d3的margin-left为-50, 效果图

 

 css代码4, d3的margin-left:-120px,效果图

 

css代码5, d2也设置左浮动,这时因为d2已经完全位于父元素之外,这时d2会向上浮动,

效果图

 

 

posted on 2022-09-11 05:38  豁然高  阅读(555)  评论(1编辑  收藏  举报