marginCollapse之兄弟关系的DIV
废话不说,直接上图
基本代码如下:

效果图如下:

给两个div分别加marginBottom和marginTop看一下效果

实际效果如下:

我们可以看出两个div之间的距离并不是50+50,而是只显示了一个50;原因和上一遍文章一样,两个margin值重叠了,并且只显示最大的一个。
解决方案:
1.两个div中的任意一个加“display:inline-block”;
如果两个div需要横向加margin,如红色的加margin-right,蓝色的加margin-left时的解决方案如下:
1.两个div同时加float;
2.两个div同时加“display:inline-block”;(这里有一个小坑:两个div之间的距离会大于两个margin之和,解决方案见inline-block的特点)
如有错误,欢迎纠正。
marginCollapse之兄弟关系的DIV的更多相关文章
- margin collapse 之父子关系的DIV
打算花点时间将知识整理一下,虽然平时现用现查都能完成工作,可是当遇到面试这种事情的时候,临时查就来不及了... 关于margin,整理若干知识点如下: 一:父子关系的DIV标签以及未加margin时的 ...
- appium通过同级别(兄弟关系)元素找到元素
在做appium测试用例的时候,要获取金额值,用uiautomatorviewer查看该元素,该元素没有特别明显的个性特点,唯一有特点的定位是有content-desc值,但是该值是变动的,所以无法通 ...
- 浏览器console中加入jquery,测试选择元素
一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery ...
- CSS的引入方式和复合选择器
CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...
- CSS2系列:外边距合并问题(margincollapse)
外边距合并 w3介绍这个问题地址:https://www.w3.org/TR/CSS2/box.html#collapsing-margins 当两个垂直方向外边距相遇,它们将形成一个折叠外边距. 合 ...
- JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...
- HTML DOM元素关系与操作
<html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...
- 最详细的div边距合并的问题和解决方法
对于前端来说写页面是最基础的东西了,但是想不到还是有人不理解边距合并的问题,昨天有网友问我为什么设置的margin不是我设置的实际效果? 好吧,废话不多说,下面来说一下关于margin合并的问题. 解 ...
- Python selenium —— 父子、兄弟、相邻节点定位方式详解
今天跟大家分享下selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点. ...
随机推荐
- Andoid自动判断输入是电话,网址或者Email的方法----Linkify的应用!
本节要讲的是,当我们在一个EditText输入电话或者网址还是Email的时候,让Android自动判断,当我们输入的是电话,我们点击输入内容将调用打电话程序,当我们输入是网址点击将打开浏览器程序.而 ...
- 2014 ACM/ICPC Asia Regional Xi'an Online(HDU 5007 ~ HDU 5017)
题目链接 A题:(字符串查找,水题) 题意 :输入字符串,如果字符串中包含“ Apple”, “iPhone”, “iPod”, “iPad” 就输出 “MAI MAI MAI!”,如果出现 “Son ...
- 关于Try/Catch 代码块
应当放在Try/Catch 代码块中的常见任务包括连接到一个数据库或与其交互.处理文件.调用Web 服务. 老实说,我这人很少有打破沙锅问到底的精神.不过昨晚听一技术人员跟他的项目经理说要在程序中使用 ...
- 【转载】 硬盘主引导记录(MBR)及其结构详解
硬盘的0柱面.0磁头.1扇区称为主引导扇区,FDISK程序写到该扇区的内容称为主引导记录(MBR).该记录占用512个字节,它用于硬盘启动时将系统控制权交给用户指定的,并在分区表中登记了的某个操作系统 ...
- CSS布局:让页底内容永远固定在底部
我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间... 先看示例:http://www.h ...
- JavaWeb项目开发案例精粹-第6章报价管理系统-06po层
1. <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www ...
- Jackson学习笔记-对象序列化
一.用ObjectMapper.readValue(jsonString, Student.class) , ObjectMapper.writeValueAsString(student) impo ...
- ajax:$.get()
提要: $.get("异步文件",数值,回调函数); 加载XML文档 a.xml <?xml version="1.0" encoding="U ...
- ThreadLocal的几种误区
最近由于需要用到ThreadLocal,在网上搜索了一些相关资料,发现对ThreadLocal经常会有下面几种误解 一.ThreadLocal是java线程的一个实现 ThreadLoca ...
- iOS:UIView的block函数实现转场动画---双视图
使用UIView动画函数实现转场动画——双视图 + (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView durati ...