当前位置:Web前端 > css> 正文

margin负值的作用

时间:2014-9-13类别:Web前端

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的中心,已到达水平垂直居中的效果。

  •  
  • HTML 代码   复制
  • 
    <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代码

  •  
  • 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;
        }
    
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐