margin,CSS边距重叠
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边距重叠的更多相关文章
- css中margin上下外边距重叠问题
css的盒子模型里是这样规定两个对象之间的距离的:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的,也就是说两个对象之间的间距就是两个对象的距离,但是当遇到两个对象一个有下外边距margin, ...
- css边距重叠的解决方案
** css防止边距重叠的方法 ** 今天整理了一下用css防止边距重叠的几种方法先假设一组dom结构 <div class="parent"> <div cla ...
- css外边距重叠及避免方法
<html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...
- CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
- CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
- CSS Margin(外边距)
CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...
- css盒模型:BFC、IFC边距重叠解决方案
BFC:块级格式化上下文 IFC:行内格式化上下文 实例如下: <div class="out" style="background: red;"> ...
- CSS盒模型以及如何解决边距重叠问题
盒模型有两种,W3C 和IE 盒子模型 W3C定义的盒模型包括margin.border.padding.content,元素的宽度width=content的宽度 IE盒模型与W3C盒模型的唯一区别 ...
- margin属性以及垂直外边距重叠问题
盒子的margin属性 盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...
随机推荐
- [BZOJ4573][ZJOI2016]大♂森林
bzoj luogu uoj sol \(orz\ \ HJT\ \ dalao\)教会我做这道题. 考虑每两个相邻位置的树的差异. 对于一个1操作(更换生长节点),假设区间是\([l,r]\),那么 ...
- [转]Cache-Control max-age=0
Cache-Control max-age=0 Cache-Control no-cache — 强制每次请求直接发送给源服务器,而不经过本地缓存版本的校验.这对于需要确认认证应用很有用(可以和 ...
- Sqoop--Free-form Query Imports 自由查询模式下$CONDITIONS关键字的作用
Scoop是用来实现HDFS文件系统和关系型数据库如MySQL之间数据传输和转换的工具. 从MySQL导出到HDFS可以通过--table, --columns and --where等设置数据抽出的 ...
- Eclipse之Web工程探究以及格式化
1. 关于部署 只要配置了Web Deployment Assembly,可以不需要手工拷贝引用jar到/WEB-INF/lib里面了,之前失败是因为引用工程的output路径有问题导致的,修改完成后 ...
- SpringCloud微服务实战——第二章Springboot
Spring Boot项目工程 src/main/java:主程序入口HelloApplication,可以通过直接运行该类来启动Spring Boot应用. src/main/resources:配 ...
- Python numpy函数:reshape()
reshape()函数用于改变数组对象的形状: import numpy as np a = np.array([1,2,3,4,5,6,7,8]) #转换成2D数组 b = a.reshape((2 ...
- 本地dns服务器到底是什么?有没有精确的概念?
1.本地dns到底是什么?为什么有时候看到的本地dns的ip是局域网类型的ip? 有的人说本地dns的概念——————是运营商提供的dns, 有的人也说,是你的局域网里的路由器一类的设备里的dns. ...
- 引用 WCF 服务后,没有生成任何 .datasource?
如题WCF服务生成成功,在添加服务引用的时候也不报错,但是添加完成之后不能正常调用服务借口. 在重新引用服务的时候,或者是是更新引用服务的时候,点“高级”按钮,在服务引用设置对话框中,将“重新使用引用 ...
- java继承。顾不了
总结:为什么结果显示所有数据都重复输出了呢? package com.sa; //java里的几个难以理解的概念.字节码文件.class文件.源文件 //.class文件指的是.编译后产生的字节码文件 ...
- rem怎么计算
px:相对长度单位.像素px是相对于显示器屏幕分辨率而言的 em:相对单位,继承父节点(层层继承,传递)基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px ...