我们都知道，一个元素框的大小是由元素内容+内边距+边框+外边距来决定的。

　　关于内边距padding，内边距呈现了元素的背景，其设置值是不可以为负的。

　　而对于外边距margin，默认为透明，设置值可以为负，其实这也就是所谓的负边距。　

　　下面我们来分析一下margin负边距的原理。

　　首先我们看看下面的布局：　　

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>inline、block、inline-block的区别</title>

         <style>

             * {

                 margin: 0;

                 padding: 0;

             }

             #box {

                 width: 600px;

                 margin: 100px auto 0 auto;

                 border: 1px solid;

                 padding: 20px;

             }

             #box #font1 {

                 color: white;

                 background: red;

             }

             #box #font2 {

                 display: block;

                 width: 100px;

                 background: green;

                 color: white;

             }

             #box #font3 {

                 display: inline-block;

                 width: 100px;

                 background: blue;

                 color: white;

             }

         </style>

     </head>

     <body>

         <div id="box">

             这是普通文本这是普通文本<span id="font1">这是inline这是inline这是inline</span>这是普通文本这是普通文本

             这是普通文本<span id="font2">这是block这是block这是block这是block</span>这是普通文本这是普通文本这是普通文本这是普通文本

             这是普通文本这是普通文本这是普通文本这是普通文本<span id="font3">这是inline-block这是inline-block这是inline-block</span>这是普通文本这是普通文本这是普通文本这是普通文本

         </div>

     </body>

 </html>

　　效果：

　　这里面包括了内联元素(inline)、块级元素(block)和行内块元素(inline-block)三种框类型。

　　内联元素(inline):

　　　　在父元素框中的位置由文档流决定。

　　　　其内边距padding决定了红色区域部分的范围，而外边距margin决定了该内联元素框与其他文本流之间的距离，且只有margin-left和margin-right设置有效。

　　　　块级元素可由display: inline属性设置为内联元素。内联元素宽(width)高(height)设置无效。

　　块级元素(block):

　　　　在父元素框中的位置由文档流决定，不过总是重起一行，即前后都有一个换行符。

　　　　其内边距padding决定了绿色区域部分的范围，而外边距margin决定了该块级元素框与其他文本流之间的距离。

　　　　元素只有为块级元素，宽(width)高(height)的设置才有效。内联元素可由display: block属性设置为块级元素。

　　行内块元素(inline-block):

　　　　在父元素框中的位置由文档流决定，其与块元素的区别在于不重起一行，前后没有换行符。

　　　　其内边距padding决定了蓝色区域部分的范围，而外边距margin决定了该块级元素框与其他文本流之间的距离。

　　　　行内块元素可以设置宽(width)高(height)，其余元素可由display: inline-block属性设置为行内块元素。

　　弄清楚了三种元素框的表现形式。我们给他们分别设置-20px的外边距。　　　　

 <style>

     * {

         margin: 0;

         padding: 0;

     }

     #box {

         width: 600px;

         margin: 100px auto 0 auto;

         border: 1px solid;

         padding: 20px;

     }

     #box #font1 {

         color: white;

         background: red;

         margin: -20px;

     }

     #box #font2 {

         display: block;

         width: 100px;

         background: green;

         color: white;

         margin: -20px;

     }

     #box #font3 {

         display: inline-block;

         width: 100px;

         background: blue;

         color: white;

         margin: -20px;

     }

 </style>

　　效果：

　　我们发现，整个父元素框变小了，并且外部文本流向各元素框推进了20px的距离，从而元素框的一部分覆盖到了文本流上。

　　这就是负边距的实现形式，我们可以这样来比喻：一个人坐在一个桶里飘在海面上，四面都是水，而由于桶的作用，人是接触不到水的。而当桶的边缘发生了破损，水就侵入到了桶里，桶里的人自然后泡到水里了。这个桶就好比外边距，而里面的人时元素的内容，外面的水自然就是文本流了。比喻也许有点不恰当，不过大概意思就是这样了。

　　我们可以用负边距做很多事情，比如多列等高、元素的居中、宽度自适应、元素框外边的裁剪等等。

【CSS】 布局之剖析负边距的更多相关文章

  1. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  2. css负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

  3. （转）CSS布局-负边距-margin

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  4. CSS布局奇淫巧计之-强大的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  5. CSS布局之-强大的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  6. css负边距之详解

    自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...

  7. css中的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  8. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. CSS 负边距读后感

    最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...

随机推荐

  1. Oracle 表关联性 Update 语句的改写,推荐改写方法1

    同事写了一个逻辑稍复杂的Update 语句,觉得在代码可读性上有些转圈,交给我帮忙改下. 以下根据原SQL,使用两种方法进行改写,个人推荐方法1的改写.方法2拆分两个SQL来写,代码可读性最强,但是S ...

  2. 记一次艰苦卓绝的Discuz x3 论坛升级过程

    首先吐槽一下discuz 的官方论坛. 你要想下载到正确版本的discuz实在不容易找到. 有兴趣自己去看吧. 就是因为这个原因, 我本来想要安装x2.5版本(那时x3 还是Beta版本), 结果不小 ...

  3. C# WPF Application 下的文件操作

    好气哦,电脑好烂,每天花大把的时间在等电脑反应上. 没有钱买新电脑,连组台式机的钱都没有.好气哦. 啊啊啊啊文件操作是什么鬼???C++下我都懵了,C#下好多东西要学!!!我不会!我不会!我不会!!! ...

  4. Transaction And Lock--在事务中使用TRY CATCH

    1>当XACT_ABORT被设置为ON时,如果TSQL 语句遇到运行时错误,整个事务会被回滚和结束2>当XACT_ABORT被设置为OFF时,如果TSQL 语句遇到运行时错误,只会回滚当前 ...

  5. MongoDB高级知识-易扩展

    MongoDB高级知识-易扩展 应用程序数据集的大小正在以不可思议的速度增长.随着可用宽带的增长和存储器价格的下跌,即使是一个小规模的应用程序,需要存储的数据也可能大的惊人,甚至超出了很多数据库的处理 ...

  6. 网易对象存储NOS图床神器

    本文来自网易云社区 注:使用过程中有什么问题或建议欢迎到如下链接提交:http://note.youdao.com/noteshare?id=6321086fa4d7a6c003656354c1aa6 ...

  7. DCL实现多线程安全的高性能懒汉模式

    DCL实现多线程安全的高性能懒汉模式 1.单线程安全的懒汉模式实现 源码: private static LazyLoad instance = null; public static LazyLoa ...

  8. CSS动态定位

    $(document).ready(function(){ $('body').on('click', '#start_timer', function() { var laydate = $(&qu ...

  9. TensorFlow支持GPU配置问题

    目录 Tensorflow-GPU 环境条件 现有硬件 现有软件 硬件要求 软件要求 步骤 0.Visual studio 1.下载安装显卡驱动 2.下载对应版本 CUDA 3.安装配置 cuDNN ...

  10. easyui页面上显示和PL/SQL编码问题

    在页面上,只需要显示人们看的懂的文字就行,但是在数据库里面就不一定了,一般情况下,在数据库里面存字母,数字等除了汉字以外的字符,存汉字有个问题,就是有时候不同oracle数据库的客户端会出现乱码问题: ...