margin负值在页面布局中的应用

http://www.w3school.com.cn/tiy/t.asp 预览工具

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

此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
 <div class="main">
        <div class="main_body">Main</div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</body>
</html>

二、去除列表右边框

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

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

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

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

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

<!DOCTYPE html>
<html>
<head>
<style> 
 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>
</head>
<body>

<div id="test"></div>
</body>
</html>

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

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

如果li的border-bottom颜色与ul的border颜色是一样的时候，在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题，给ul写个overflow：hidden；就可以解决这个问题。

<!DOCTYPE html>
<html>
<head>
<style> 
body,ul,li{margin:0;padding:0;}
    ul,li{list-style:none;}
    #test{
        margin:20px;
        width:390px;
        background:#F4F8FC;
        border-radius:10px;
        border:2px solid #D7E2EC;
    }
    #test li{
        height:25px;
        line-height:25px;
        padding:5px;
        border-bottom:1px dotted #D5D5D5;
        margin-bottom:-1px;
    }
</style>
</head>
<body>

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

http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

posted on 2015-06-15 16:01 viewcozy 阅读(320) 评论(0) 编辑收藏举报