margin负值的作用

margin负值的作用

margin常被设计者使用,而负margin应当是最少被谈及的定位方法，margin每个人都使用它，但很少人去讨论它。

一、负margin需要注意的地方

1、负margin是W3C认准的CSS是绝对标准的。W3C甚至标注过：对于margin属性来说，负值是被允许的。

2、负maring不是一种hack，不能因为缺乏对负marign的理解，就认为它是一种hack方法。除非你是用来修复自己在其他地方造成的错误。

3、不脱离文档流不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。

4、完全兼容所有现代浏览器都完全支持负margin（IE6在大多数情况下也支持）。

5、浮动会影响负margin的使用负margin不是你每天都用的CSS属性，应用时应小心谨慎。

6、Dreamweaver不解析负margin,DW的设计视图不会解析负margin。但问题是你为什么要在设计视图中检查你的网站呢？

二、通过实例说明margin负值的作用

1、左右列固定，中间列自适应布局

HTML代码

     <li class="main">
        <li class="main_body">Main</li>
    </li>
    <li class="left">Left</li>
    <li class="right">Right</li>

CSS代码

    body{...}{
        margin:0;
        padding:0;
        min-width:600px;
    }
    .main{...}{
        float:left;
        width:100%;
    }
    .main_body{...}{
        margin:0 210px;
        background:#888;
        height:200px;
    }
    .left,.right{...}{
        float:left;
        width:200px;
        height:200px;
        background:#F60;
    }
    .left{...}{
        margin-left:-100%;
    }
    .right{...}{
        margin-left:-200px;
    }

		

2、去除列表右边框

项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class，项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class。利用负margin就可以实现这种效果

HTML代码

    <li id="test">
        <ul>
            <li>子元素1</li>
            <li>子元素2</li>
            <li>子元素3</li>
            <li>子元素4</li>
            <li>子元素5</li>
            <li>子元素6</li>
        </ul>
    </li>

CSS代码

    body,ul,li{...}{ padding:0; margin:0;}
    ul,li{...}{ list-style:none;}
    #test{...}{
        width:320px;
        height:210px;
        background:#CCC;
    }
    #test ul{...}{
        margin-right:-10px;
        zoom:1;
    }
    #test ul li{...}{
        width:100px;
        height:100px;
        background:#F60;
        margin-right:10px;
        margin-bottom:10px;
        float:left;
    }

		

3、负边距+定位：水平垂直居中

 
使用绝对定位将li定位到body的中心，然后使用负margin（content宽高的一半），将li的中心拉回到body的中心，已到达水平垂直居中的效果。

<li id="test"></li>

<style type="text/css">...
body{...}{margin:0;padding:0;}
    #test{...}{
        width:200px;
        height:200px;
        background:#F60;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
</style>
		

4、去除列表最后一个li元素的border-bottom

列表中我们经常会添加border-bottom值，最后一个li的border-bottom往往会与外边框重合，视觉上不雅观，往往要移除。

html 代码

    <ul id="test">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>

css代码

    body,ul,li{...}{margin:0;padding:0;}
    ul,li{...}{list-style:none;}
    #test{...}{
        margin:20px;
        width:390px;
        background:#F4F8FC;
        border-radius:3px;
        border:2px solid #D7E2EC;
    }
    #test li{...}{
        height:25px;
        line-height:25px;
        padding:5px;
        border-bottom:1px dotted #D5D5D5;
        margin-bottom:-1px;
    }