1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

margin负值使用之八大绝技

作者:用户 来源:互联网 时间:2016-03-11 14:30:58

marginline-heightpadding副tab标题元素goback()pxgobackheight暴虐查找

margin负值使用之八大绝技 - 摘要: 本文讲的是margin负值使用之八大绝技, 相信关于margin负值的使用,每个人都有自己的一套方法。在这里,整理了一下平时常用的一些margin负值制作的效果,与大家分享! 先来看一下margi

相信关于margin负值的使用,每个人都有自己的一套方法。在这里,整理了一下平时常用的一些margin负值制作的效果,与大家分享!

先来看一下margin负值的原理解析图:

margin负值使用之八大绝技-margin负值

当给一个元素设置margin 负值(top/left),该元素将在该方向上产生位移。例如:

 /* 元素向上位移10px */  

.demo {margin-top:-10px;}   

二、当给一个元素设置margin负值(bottom/right),这个元素并不会像你所预想的产生位移,而是将任何紧随其后的元素“拉”过来,覆盖在自己的上边。例如:

/* 所有紧随元素demo之后的元素向上位移10px */  

.demo {margin-bottom:-10px;}   

注:如果元素没有设置宽度,那么给该元素设置margin负值(left/right)将会在两个方向增大其宽度,看起来就好像给该元素添加了padding。 

【案例解析】

一、三栏显示(无需浮动及额外标签);

列表过长时,我们一般都会考虑通过浮动来使之显示为多列,其实换个思路也可以实现。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>negative margin 之列表三栏显示</title>
    <style>
    *{margin:0;padding:0;font-size: 14px;}
    .goback{clear:both;height:30px;line-height:30px;text-align: center;}

    ul {list-style:none;}
    li {width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3em;}
    .col2 {margin-left:120px;}
    .col3 {margin-left:240px;}
    .top {margin-top:-2.6em;}
    </style>
</head>
<body>
    <ul>
        <li class="col1">10家国企年招待费超29亿 被指仅用于吃喝</li>
        <li class="col1">媒体称中国豪车市场因政府严控公车快速萎缩</li>
        <li class="col2 top">菲发言人笑答射杀台渔民事件</li>
        <li class="col2">情妇打越洋电话提供证据</li>
        <li class="col3 top">雷政富涉嫌受贿罪被检察机关提起公诉</li>
        <li class="col3">日称冲绳久米岛附近海域发现疑似中国海军潜艇</li>
    </ul>
</body>
</html>

二、叠加效果;

最常见的选项卡,当前项选中状态;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>negative margin 之叠加</title>
    <style>
    *{list-style:none;margin:0;padding:0;font-size: 12px;}
    .clearfix:after {
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    content: "";
}
    .clearfix {*zoom:1;}
    .goback{clear:both;height:30px;line-height:30px;text-align: center;}
    
    .demo{width:400px;}
    .tab{
    border-bottom:1px solid #66CC66;
    }
    .tab li{
    float:left;
    display:inline;
    margin-left:8px;
    }
    .tab li a{
    background-color:#CCFFCC;
    border:1px solid #66CC66;
    color:#666;
    display:block;
    margin-bottom:-1px;
    padding:0 5px;
    line-height:20px;
    float:left;
    font-weight:bold;
    text-decoration:none;
    }
    .tab li .current,
    .tab li a:hover{
    background-color:#fff;
    border-bottom:1px solid #fff;
    _position:relative;
    }
    .cont{padding:10px;border:1px solid #6c6;border-top:0;}
    </style>
</head>
<body>
    <div class="demo">
        <div id="demo2">
                    <ul class="tab clearfix">
                        <li><a href="#" class="current">Tab One</a></li>
                        <li><a href="#">Tab Two</a></li>
                        <li><a href="#">Tab Three</a></li>
                        <li><a href="#">Tab Four</a></li>
                    </ul>
                </div>
        <div class="cont">荒凉的旷野,一群暴虐的劫匪正在鞭挞一位美丽的姑娘玛丽亚(萝蕾丹娜·卡波莱特 Loredana Cappelletti饰)。幸得迪亚戈(弗兰科·尼罗 Franco Nero饰)的解救。他神秘而冷峻,拖着一副棺材漫步在泥泞的荒野上。迪亚戈带着玛丽亚来到荒凉的小镇,人们对他的到来充满好奇,更对这副棺材里隐藏的秘密而惶惶不安。</div>
    </div>
</body>
</html>

三、两列流式布局;

固定宽度的布局so easy,配合浮动轻松搞定两列自适应布局,三列同理。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>negative margin 之两列自适应布局</title>
    <style>
    *{list-style:none;margin:0;padding:0;font-size: 12px;}
    .goback{clear:both;height:30px;line-height:30px;text-align: center;}
    
    .layout{width:960px;margin:0 auto;background:#f5f5f5;}
    .main{float:left;width:100%;height:300px;margin:0 -200px 0 0;background:#ccc;}
    .main-wrap{margin:0 210px 0 0;}
    .aside{float:left;width:200px;height:300px;background:#f5f5f5;}
    </style>
</head>
<body>
    <div class="layout">
        <div class="main">
            <div class="main-wrap">main</div>
        </div>
        <div class="aside">aside</div>
    </div>
</body>
</html>

四、去除多余的外边距;

图文混排,每行最后一个元素的margin值如何处理?单独设置类名消0?通过父层来裁切?使用margin负值吧!

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>negative margin 之去除多余外边距</title>
    <style>
    *{list-style:none;margin:0;padding:0;font-size: 12px;}
    .clearfix:after {
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    content: "";
}
    .clearfix {*zoom:1;}
    .goback{clear:both;height:30px;line-height:30px;text-align: center;}
    
    .demo{width:320px;margin:0 auto;padding:10px 0;*overflow:hidden;background:green;}
    .figure-list{margin:0 -10px 0 0;}
    .figure-list li{float:left;width:100px;height:100px;margin:0 10px 10px 0;background:#f5f5f5;}
    </style>
</head>
<body>
    <div class="demo">
        <ul class="figure-list clearfix">
            <li>item-1</li>
            <li>item-2</li>
            <li>item-3</li>
            <li>item-4</li>
            <li>item-5</li>
            <li>item-6</li>
        </ul>
    </div>
</body>
</html>



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索margin , line-height , padding , 副tab标题 , 元素 , goback() , px , goback , height 暴虐查找 margin负值、margin left 负值、margin负值原理、margin为负值、margin top 负值,以便于您获取更多的相关知识。

java-一个扯淡的逻辑求神一样的答复

...时,还说明每个类型的值都是有范围的。溢出了就变成了负值。理解这两点就可以了。真要想知道这个值,太难几了,反正是32个2的相乘之积。 解决方案五: 这时,学生初学时的练脑力的题目。只是说明表达式也有值的。int...

css中margin 负值使用一例

margin我很少会用到,一般用到也只是相对的去调整一个层的位置以达到一定效果。因为最近正在着手更新自己使用的主题,所以研究了一下各种布局的实现方法。发现使用margin负值形成的布局结构要比我们一般用层嵌套层再去分...

PHP Css常用04

...优先级越高;可以有负值 注意:必须设置了position才有效margin的特性 1.左右外边距会相加(正常理解) 2.上下外边距会重叠显示,取最大的值为显示标准 3.父元素的第一个子元素的上边距(margin-top)如果碰不到父元素有效的边框或者...

大V云集!参加首届阿里巴巴在线技术峰会的八大理由

...服务化的主要解决方案,二者在阿里巴巴拥有最为广泛的使用量。 阿里云资深专家易立,曾在IBM中国开发中心工作14年,负责和参与过IBM企业平台云产品线PureApplication System、Web 2.0、SOA中间件等重大项目。 阿里云高级技术专家...

JS之歪门绝技

函数的另类写法:对于下面这个函数: function foo(arg1,arg2){ console.log("呵呵");} 还可以定义为这样: var fn = new Function("arg1","arg2",'console.log("呵呵");');fn();//调用函数

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备