margin的负值

「爱情、让人受尽委屈。」 2022-06-11 23:11 155阅读 0赞

# margin的负值 #

前不久看到了久闻大名的双飞燕布局，其中用到的主要技巧就是margin的负值。margin的负值大致有以下几种效果。

## 1. 用在普通文档流中 ##

在普通文档流中，margin的负值仿佛能减小元素在文档流中的大小。实际上，它的尺寸并没有变化，只是文档流在计算元素的位置的时候，会认为负边距把元素的尺寸缩小了。可以类比margin的正值来看。下面是例子：

1.  这是没有设置margin的时候：（test是inline-block)
    
    ![这里写图片描述][SouthEast]
2.  这是设置margin为10px时：
    
    ![margin10][]
3.  这是设置margin为-10px时：
    
    ![margin-10][]

但是需要注意的是，margin并没有影响到它前面的文档流。

其实类比正的margin来说，一个是向外填充了，然后会导致周围元素远离他，一个相当于将填充物抽走了，周围的元素会靠近它。

总之一句话：**在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认得只是这个边界，而不管你实际的尺寸大小。**

## 2.在块级元素中 ##

其实margin影响的就是元素的边界，不管正margin还是负margin，即使不在普通文档流中

在块级元素中，如果自身没有设置宽度，那么这个块级元素的宽度将会由父级元素的宽度决定。如果设置了margin值，margin为正时，那么宽度将会变小，即元素自身的宽度加上margin等于父级元素的宽度。一样的道理，如果margin为负，那么自身宽度加上margin等于父级元素的宽度，所以这时该元素的宽度就会变大。

eg:

margin为0：

![blockmargin0][]

margin为正：

![blockmargin+][blockmargin]

margin为负：

![blockmargin-][]

这个技巧的用处：

消除列表的右边框：

经常会用到列表来显示信息，为了美观通常每个列表之间会设置一定的间距，但是需要对最右边的间距进行特别处理，设置它的margin-right:0， 下面就使用margin的赋值来实现这种效果：

![marginexample][]

代码：

<head>
      <style> body, ul, li { padding: 0; margin: 0; list-style-type: none; } .test { margin:0 auto; border: 2px solid black; width: 320px; height: 210px; background-color: gray; } .test ul { margin-right: -10px; } .test li { width: 100px; height: 100px; background-color: #ff0; margin-right: 10px; margin-bottom: 10px; float: left; } </style>
    </head>
    <body>
        <div class="test">
            <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
                <li>test5</li>
                <li>test6</li>
            </ul>
        </div>
    </body>

## 3.在浮动元素中： ##

和前面的类似，在浮动元素中使用margin的负值，将会使得元素的边界发生改变，根据边界的改动就能实现前面那些双飞燕布局等等。

下面先举一个简单的例子：

![floatmargin][]

这是正常浮动的三个块级元素，block3由于第一行宽度不够被寄到了第二行

![floatmargin-40][]

在这里我讲block3的margin：-40%，可以看到block3 到了第一行，这是因为它的左边界的判定变了，使得他的左边界加上它的宽度并不超过整个页面的宽度，所以留在了第一行。

![floatmargin-70][]

这里我把margin设为了-70%，可以看到block3 继续 向左移动。

所以利用这个特性就可以把写在后面的元素却显示在前面，这也就是那些双飞燕布局，圣杯布局等的原理。说明白些也就是左右列固定，中间列自适应布局：

![双飞燕][SouthEast 1]

代码：

<body>
       <style> body { margin: 0; padding: 0; min-width: 600px; background-color: #ccc; } .main { width: 100%; float: left; } .mainbody { margin: 0 210px; height: 200px; background-color: #666; } .left { margin-left: -100%; background-color: #f60; float: left; width: 200px; height: 200px; } .right { float: left; width: 200px; margin-left: -200px; background-color: #f60; height: 200px; } </style>
    </head>
    <body>
        <div class="main">
            <div class="mainbody">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </body>

## 4.在绝对定位元素中： ##

绝对定位元素的top、right、bottom、left等值是元素自身边界到最近的已定位祖先元素的距离，元素自身边界指的就是margin定义的边界，所以可以使用margin来控制元素的位置。

下面是使用绝对定位来进行居中的方法：

![absolute][]

代码：

<body>    
        <style> body { padding: 0; margin: 0; } div { width: 200px; height: 200px; background-color: gold; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; } </style>
    </head>
    <body>
        <div></div>
    </body>

参考资料：[http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html\#2457812][http_www.cnblogs.com_2050_archive_2012_08_13_2636467.html_2457812]

[http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html][http_www.cnblogs.com_jscode_archive_2012_08_28_2660078.html]

[SouthEast]: /images/20220612/56f4246b6d294481b37dfad5139865aa.png
[margin10]: /images/20220612/c837742be90d4774b1a18e1c47c1d427.png
[margin-10]: /images/20220612/7c399ccce7dd44e1b65c5986ae514eba.png
[blockmargin0]: /images/20220612/f913f3eeff6f471fbdd5c621a281b70a.png
[blockmargin]: /images/20220612/ecc93de68da440b9848a981b6b0699ba.png
[blockmargin-]: /images/20220612/96cfffab093542a18d55c74512eebfbc.png
[marginexample]: /images/20220612/21be72564c8f4da28037970314123e09.png
[floatmargin]: /images/20220612/ac74d8f05f8c4bce8996d3bee7d696d5.png
[floatmargin-40]: /images/20220612/c97f0dca2a3244a4a32d730913b7549c.png
[floatmargin-70]: /images/20220612/890a4907da014d54ad6158ef030f5523.png
[SouthEast 1]: /images/20220612/bf2b3bd818744a8dbe5e1d1645b50884.png
[absolute]: /images/20220612/42e92233fa1f4e598b7d9641a9ffa029.png
[http_www.cnblogs.com_2050_archive_2012_08_13_2636467.html_2457812]: http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
[http_www.cnblogs.com_jscode_archive_2012_08_28_2660078.html]: http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html