margin负值怎么用

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

     <div class="main">        <div class="main_body">Main</div>    </div>    <div class="left">Left</div>    <div class="right">Right</div><style>    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;    }</style>

2、去除列表右边框

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

 <div id="test">        <ul>            <li>子元素1</li>            <li>子元素2</li>            <li>子元素3</li>            <li>子元素4</li>            <li>子元素5</li>            <li>子元素6</li>        </ul>    </div><style>    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;    }</style>

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

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

<div id="test"></div><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>

文章转载自： margin负值的作用   http://www.studyofnet.com/news/602.html