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中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点. ...
随机推荐
- Eclipse环境下配置spket中ExtJS提示
使用eclipse编写extjs时,一定会用到spket这个插件,spket可以单独当作ide使用,也可以当作eclipse插件使用,我这里是当作eclipse的插件使用的,下面来一步步图解说明如何配 ...
- ****Web API 版本控制的几种方式
个人建议:用content type,即放在Header里面!比如加一个Version:1.4.3 这篇文章写得很好,介绍了三种实现web api版本化的三种方式.我从评论里又收集到两种方式,所以一共 ...
- 收缩SQL数据库日志文件
收缩SQL数据库日志文件 介绍具体的操作方法前,先说下我操作的实际环境和当时的状况.我的服务器是windows server 2008 R2 64位英文版,数据库是SQL server 2008英文版 ...
- Could not create the driver from NHibernate.Driver.SQLite20Driver
使用NHibernate连接Sqlite语句,版本为.net3.5. 升级.net 4.0出现异常,提示”Could not create the driver from NHibernate.Dri ...
- Hadoop处理大量小文件的问题和解决方法
小文件指的是那些size比HDFS的block size(默认64M)小的多的文件.如果在HDFS中存储小文件,那么在HDFS中肯定会含有许许多多这样的小文件(不然就不会用hadoop了).而HDFS ...
- RHEL7全新初始化进程管理systemd(图形启动和非图形启动切换)
红帽RHEL7系统已经替换了大家熟悉的初始化进程System V init,正式采用全新的 初始化进程systemd.初始化进程systemd使用了并发启动机制,所以开机速度上得到了不小的 提升. 将 ...
- 【USACO】
Among the large Wisconsin cattle ranchers, it is customary to brand cows with serial numbers to plea ...
- android-HttpClient上传信息(包括图片)到服务端
需要下载apache公司下的HttpComponents项目下的HTTPCLIENT ----------地址为http://hc.apache.org/downloads.cgi 主要是用到了htt ...
- python中的类简单讲解
类似其它的语言, Python 中的函数使用小括号( () )调用.函数在调用之前必须先定义.如果函数中没有 return 语句, 就会自动返回 None 对象. Python 是通过引用调 ...
- Java 互联网工程师要具备哪些技能或技术?
Java技术的世界是个无底洞,永远也学不完,不废话了,我就简单的说一下自己的看法(偏重Java方面,什么html.css.js这些不在这次的讨论之内,虽然JavaServer开发有时候也都需要懂点): ...