关于负外边距的作用效果

今天无意中看到了双飞燕,圣杯布局,发现里面主要是有用到一个负外边距,感觉挺神奇的这玩意
( ⊙ o ⊙ )!看就了一些关于负外边距的资料,这里自己总简单结一下。
参考网址:
http://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html
http://www.daqianduan.com/6239.html

负外边距主要分为在普通文档流的作用效果和 对浮动元素的作用效果

对普通文档流

  • marin-left或者margin-top是负值:它会将元素在相应的方向进行移动。left就是左右方向移动,top就是上下方向移动。也就是会使元素在文档流里的位置发生变化。
  • margin-right或者margin-bottom是负值:它不会移动该元素(该元素不变化),但会使该元素后面的元素往前移动。也就是说,如果margin-bottom为负值,那么该元素下面的元素会网上移动;如果margin-right为负值,那么该元素右边的元素会往左移动,从而覆盖该元素。
    例:

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style type="text/css">
        *{
            margin:0px;
            padding: 0px
        }
        #div1{
            background-color: red;
            width:100px;
            height: 100px;
            margin-bottom:-50px;
        }
        #div2{
            height: 100px;
            width:100px;
            background-color: yellow;
        }
    style>
head>
<body>
    <div id="div1">
    div>
    <div id="div2">div>
body>
html>

效果如图:

关于负外边距的作用效果_第1张图片

  • 如果元素没有设置宽度,那么margin-left和margin-right取负值 ,会将元素左右拉长,我们可以看见宽度边长了。
    例:

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style type="text/css">
        *{
            margin:0px;
            padding: 0px
        }
        #div1{

            width:400px;
            height: 100px;
            border:10px solid black;
        }
        #div3{
            height: 100px;
            margin-right: -100px;
            background-color: red;
        }
    style>
head>
<body>
    <div id="div1">
        <div id="div3">div>
    div>
body>
html>

效果见下图:

关于负外边距的作用效果_第2张图片

显然,div3的长度被拉长了100px。

对浮动元素

对于浮动元素来说,负外边距的效果和普通文档流类似,不过也有一些特殊的地方。】

  • 和之前一样,如果是设置left,top那么该元素会移动,如果是bottom和right也会使后面的元素往前移动,遮盖前面的元素。

  • 如果有几个相邻的浮动元素,设置左右的负的外边距,那么右边的浮动元素会向左覆盖前面的浮动元素。并且,如果某个浮动元素是因为窗口大小或者它前面的浮动元素的宽度,从而掉到下一行的话,那么给他设置一个margin-left负值或者给她前面的元素设置一个margin-right负值,就会使得这个元素往上一行移动。(╮(╯_╰)╭就是从下面一行的左边消失,从上一行的右边出现,感觉挺神奇的)

例:
这是没有设置负外边距的时候


<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style type="text/css">
        *{
            margin:0px;
            padding: 0px
        }
        #div1{

            width:2000px;
            height: 100px;
            background-color: yellow;
            float: left;

        }
        #div2{
            height: 100px;
            width:100px;
            background-color: red;
            float:left;
            /*margin-left: px;*/
        }
    style>
head>
<body>
    <div id="div1">div>
    <div id="div2">div>
body>
html>

这里写图片描述

现在给div2设置一个负的margin-left

    #div2{
            height: 100px;
            width:100px;
            background-color: red;
            float:left;
            margin-left: -100px;
        }

这里写图片描述

从图中可以发现div2消失了,也就是它向左移动了本身的宽度值后,在页面上没有显示了,然后把margin-left设置为-200px
效果如下:
这里写图片描述

可以发现div2跑到上面一行去了,以此类推…

注意:在这里,给div1设置负的margin-right和给div2设置负的margin-left效果是一样的。

负的外边距的作用其实很强大,许多布局定位都可以使用负的外边距,具体的实现以后有时间在补充吧~~

待续…

你可能感兴趣的:(前端,css)