您的位置：首页 > 网站优化 > css  >  css中margin 负值使用一例

css中margin 负值使用一例

 更新时间：2016年9月14日 14:19  点击：2014
margin在css中是负值或正值了我们在这里来为各位深入的介绍一下关于css中margin 负值在使用过程中一些问题与状态效果。

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

margin 负值对文档流的影响

确切的说应该是margin负值对于层定位的影响，

没有浮动时

如果没有浮动的话，负的外边距会影响到各个层的高度、宽度，
当然这要看你设定的是水平还是垂直的负边距。有兴趣的可以去建立一个demo实验一下。

有浮动时

有浮动时当然要复杂的多，本例以向左浮动（float:left;）为例。
DEMO 地址：margin 负值布局演示

margin-demo

简单概括一下这个例子：

整个演示包括三个层 自左至右是 #gird-left、#main、#siderbar
在文档流的先后顺序却是#main、#gird-left、#siderbar
三个层的浮动都是向左（float:left;），而且三个层都在一个水平位置。
比较通俗的讲法就是如果你想实现如上布局就要外边距的负值大于当前水平的所有宽度。
css布局定义如下：

#main{
margin: 0 315px 0 160px;
}
以#main作为主要的文档流显示左右分别预留160像素和315像素来给剩下的两个层留出位置。

#gird-left{
margin-left: -100%;
}

左外边距-100%，可以将本层直接从文档流抽出直接显示在父级层最左上的位置。

#siderbar{
margin-left: -300px;
}

将#siderbar设定-300像素是因为本层有300像素宽，而上一个层宽度为100%；

这一个例子牵扯到了margin负值的多种综合应用，希望你能看懂。
浮动的margin负值布局，同一水平位置是会层叠的，
靠后的文档流会在上层，
如果看不懂给一个增强理解的例子：

margin--

margin负值布局的好处

从文档的先后顺序来看，我们不需要像传统布局那样，由上至下，由左至右的安排文档流代码的顺序。
很明显，作为一个网页内容的重要先后顺序为#main、#gird-left、#siderbar，
而我们阅读网页的习惯是将主要的东西放中间，其次左，最后右，
使用负值外边距我们完美的做到了这一点，
不但能优化搜索引擎而且还提高了阅读体验。

【案例解析】

一、三栏显示（无需浮动及额外标签）;
列表过长时，我们一般都会考虑通过浮动来使之显示为多列，其实换个思路也可以实现。

<!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负值布局的缺点

作为层叠的文档流，我们要多做一些测试，以免各层文字内容重叠造成阅读困难

[!--infotagslink--]

相关文章

  • 图解PHP使用Zend Guard 6.0加密方法教程

    有时为了网站安全和版权问题，会对自己写的php源码进行加密，在php加密技术上最常用的是zend公司的zend guard 加密软件，现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25

  • C# 中如何取绝对值函数

    本文主要介绍了C# 中取绝对值的函数。具有很好的参考价值。下面跟着小编一起来看下吧...2020-06-25

  • PHP正则匹配img及标签各属性值（匹配图片函数）

    有一个项目要获取页面中所有img标签中的图片地址，这里我们使用到了preg_match_all正则函数，然后看我下面的一些参数即可实现了。 例 代码如下 复制代码 ...2016-11-25

  • ps怎么使用HSL面板

    ps软件是现在很多人都会使用到的，HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板，还不知道使用方法的下面一起来看看。 &#8195;...2017-07-06

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02

  • php数组操作 键名比较 差集 交集赋值

    本文章提供在量的数据中级操作实例有如对键名比较计算数组的差集 计算差集 给指定数组中插入一个元素 反转数组 交集赋值新的数组实例。 //定义回调函数 funct...2016-11-25

  • 微信小程序 页面传值详解

    这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13

  • Plesk控制面板新手使用手册总结

    许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板，在这里小编整理了一些关于Plesk控制面板常用的使用方案整理，具体如下。 本文基于Linu...2016-10-10

  • 使用insertAfter()方法在现有元素后添加一个新元素

    复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31

  • 使用percona-toolkit操作MySQL的实用命令小结

    1.pt-archiver 功能介绍： 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍： pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据，不会对线上数据的OLTP查询造成太大影响，你可以将...2015-11-24

  • 使用GruntJS构建Web程序之构建篇

    大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下，该目录有两个js文件，selector.js和ajax.js。编译后代码放在dest，这个grunt会...2014-06-07

  • 如何使用php脚本给html中引用的js和css路径打上版本号

    在搜索引擎中搜索关键字.htaccess 缓存，你可以搜索到很多关于设置网站文件缓存的教程，通过设置可以将css、js等不太经常更新的文件缓存在浏览器端，这样访客每次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、...2015-11-24

  • jquery ready函数、css函数及text()使用示例

    .text更改内容 .css更改样式...2013-10-03

  • c# 判断是否为空然后赋值的4种实现方法

    下面小编就为大家分享一篇c# 判断是否为空然后赋值的4种实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25

  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合...2014-05-31

  • 安装和使用percona-toolkit来辅助操作MySQL的基本教程

    一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合，用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务，这些任务包括： 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24

  • C#注释的一些使用方法浅谈

    C#注释的一些使用方法浅谈，需要的朋友可以参考一下...2020-06-25

  • MySQL日志分析软件mysqlsla的安装和使用教程

    一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24

  • php语言中使用json的技巧及json的实现代码详解

    目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30

  • PHP实现无限级分类（不使用递归）

    无限级分类在开发中经常使用，例如：部门结构、文章分类。无限级分类的难点在于“输出”和“查询”，例如 将文章分类输出为<ul>列表形式； 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法，各有利弊。其中...2015-10-23