CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合。

重叠结果计算规则:

  • 两个相邻的外边距都是正数时,折叠结果是它们两个之间较大的值.
  • 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值.
  • 两个边距一正一负时,折叠结果是两者相加的和.

具体演示:

<div class="ev"> <div class="div1">这是第一个块</div> <div class="div2">这是第二个块</div> </div>
先定义两个块元素。我是用,记得把span的样式设置成为块元素,否则达不到想要的效果。
<div class="ev"> <span class="div1">这是第一个块</span> <span class="div2">这是第二个块</span> </div>

第一种情况,margin都为正

<style type="text/css"> .ev{ margin:300px; width:300px; height:300px; background-color:#ddd; } .div1{ display:block; width:100px; height:100px; margin:30px; background-color:red; } .div2{ display:block; width:100px; height:100px; margin:-30px; background-color:yellow; } </style>

用浏览器检查元素。可以看到两个块的外边距重叠了,为30px;边距重叠现象的解决办法是BFC,这个概念下次再详细介绍。

第二种情况,margin都为负

<style type="text/css"> .ev{ margin:300px; width:300px; height:300px; background-color:#ddd; } .div1{ display:block; width:100px; height:100px; margin:-30px; background-color:red; } .div2{ display:block; width:100px; height:100px; margin:-30px; background-color:yellow; } </style>

可以明显的看到,仍然有边距重叠,且第二个块向第一个块的内部重叠了30px;

第三种情况 第一个块margin为正,第二个块margin为负

<style type="text/css"> .ev{ margin:300px; width:300px; height:300px; background-color:#ddd; } .div1{ display:block; width:100px; height:100px; margin:30px; background-color:red; } .div2{ display:block; width:100px; height:100px; margin:-30px; background-color:yellow; } </style>

话不多说,自己看图

第四种情况 第一个块margin为负,第二个块margin为正

<style type="text/css"> .ev{ margin:300px; width:300px; height:300px; background-color:#ddd; } .div1{ display:block; width:100px; height:100px; margin:-30px; background-color:red; } .div2{ display:block; width:100px; height:100px; margin:30px; background-color:yellow; } </style>

以上就是我的演示,实际是有局限性的,比如说,我的margin都设置成了同样的30px,设置成不一样的值又是怎样的效果?
再比如说,我用的块都是100*100px的大小,如果块元素大小不同,又是怎么样的效果?

一点一点爬,不至于懒死。

margin,CSS边距重叠的更多相关文章

  1. css中margin上下外边距重叠问题

    css的盒子模型里是这样规定两个对象之间的距离的:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的,也就是说两个对象之间的间距就是两个对象的距离,但是当遇到两个对象一个有下外边距margin, ...

  2. css边距重叠的解决方案

    ** css防止边距重叠的方法 ** 今天整理了一下用css防止边距重叠的几种方法先假设一组dom结构 <div class="parent"> <div cla ...

  3. css外边距重叠及避免方法

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...

  4. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

  5. CSS 外边距(margin)重叠及防止方法

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...

  6. CSS Margin(外边距)

    CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...

  7. css盒模型:BFC、IFC边距重叠解决方案

    BFC:块级格式化上下文 IFC:行内格式化上下文 实例如下: <div class="out" style="background: red;"> ...

  8. CSS盒模型以及如何解决边距重叠问题

    盒模型有两种,W3C 和IE 盒子模型 W3C定义的盒模型包括margin.border.padding.content,元素的宽度width=content的宽度 IE盒模型与W3C盒模型的唯一区别 ...

  9. margin属性以及垂直外边距重叠问题

       盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...

随机推荐

  1. 转: 全局变量报错:UnboundLocalError: local variable 'l' referenced before assignment

    http://blog.csdn.net/my2010sam/article/details/17735159

  2. java编程思想第八章多态

    前言: 封装:通过合并特征和行为创建新的数据类型. 实现隐藏:通过将细节“私有化”,把接口和实现分离. 多态:消除类型间的耦合关系.也称作动态绑定,后期绑定或运行时绑定. 8.1再论向上转型: 对象既 ...

  3. Python 函数之迭代器和生成器

    1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,迭代器仅仅在迭代到某个元素时才计算该元素,而在这之前或之后,元素可 ...

  4. 表有外键所以delete报错了,这里有2种办法处理:

    表有外键所以delete报错了,这里有2种办法处理: (1)      临时设置外键失效 (2)      删除表涉及到的外键的表的数据 2.外键失效的处理方案 mysql> SET FOREI ...

  5. Azure SLB + httpd + ILB + HAProxy + Atlas + MySQL

    为了测试一个环境,需要在Azure上搭建高可用的LAMP架构.但要求MySQL的中间件Atlas采用主备的模式.在数据中心一般采用Keepalive+VIP的模式,通过浮动地址对外提供服务. 但在云环 ...

  6. Linux驱动 - select函数介绍

    一.select 函数介绍 select函数用于在非阻塞中,当一个套接字或一组套接字有信号时通知你,系统提供select函数来实现多路复用输入/输出模型,原型:          #include & ...

  7. OpenCV绘图函数

    OpenCV几个绘图函数 矩形 rectangle(Mat& img,Point pt1, Point pt2, const Scalar&color, int thickness=1 ...

  8. 数组可以直接转换为DataRow

    string[] cc=new string[3]{...}; Dt.Rows.Add(cc);

  9. java反射专题二

    一丶Class中常用方法详解 1)getFields() 只能获取到运行时类中及其父类中声明为public的属性 2)getDeclaredFields() 获取运行时类本身声明的所有属性 3)get ...

  10. 10-23C#基础--结构体

    结构体: 1.定义:封装小型相关变量组,里面可以放一系列的变量: 就是一个变量组,将一组变量放在一起,结构体一般定义在Main函数上面,位于Class下面,作为一个类:一般情况Struct定义在Mai ...