上下相邻的（算一种兄弟关系）普通元素，上下边距并非简单的相加，而是取其中最大的边距值；而浮动的盒子边距是相加的；父子div也会发生重叠，并不是bug；

<style>
#test1{
width:1000px;
height:100px;
background:blue;
margin-bottom:50px;
}
#test2{
width:1000px;
height:100px;
background:green;
margin-top:20px;
}
</style>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
</body>

自适应居中，不管屏幕有多大，它都会居中。

<style>

div{
width:300px;
height:300px;
background:gray;
margin:0px auto;
/*border:30px solid blue;
padding:30px;
margin:30px;*/
}
</style>
</head>
<body>
<div>
有一首诗最为动人，那就是青春；有一段人生最美丽
</div>

margin重叠现象与margin auto自适应居中的更多相关文章

  1. margin重叠现象

    1.上下/左右相邻的普通元素margin,不是两者相加之和,而是取最大值,这个现象叫做margin重叠. 2. 普通元素才会发生margin重叠,如果是float元素,就不会发生.margin是两者相 ...

  2. 深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  3. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  4. margin auto 实现居中，与text-align:center的区别

    本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定.这些值中,只有width和margin-left,margin-right可以设为auto,text- ...

  5. IE下div使用margin:0px auto不居中的原因

    IE下div使用margin:0px auto不居中的原因 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用, ...

  6. margin的重叠现象

    当两个相邻的普通元素设置margin时,则它们的间距并不是简单的外边距相加. <!DOCTYPE html> <html lang="en"> <he ...

  7. 绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

    声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...

  8. IE8 margin:0 auto 不能居中显示的问题

    ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...

  9. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

随机推荐

  1. eclipse 搭建python环境

    1.安装eclipse + jdk windows下面就直接下载,双击安装就完了. Linux下: 安装eclipse: 安装完之后,可直接运行eclipse: 快捷方式在: 安装jidk:   2. ...

  2. kettle系列-1.kettle源码获取与运行

    第一次写博客,心里有点小激动,肯定有很多需要改进的地方,望海涵. kettle算是我相对较为深入研究过的开源软件了,也是我最喜欢的开源软件之一,它可以完成工作中很多体力劳动,在ETL数据抽取方面得到了 ...

  3. Java小知识--length,length(),size()方法详细介绍

    Java中length,length(),size()区别 length属性:用于获取数组长度. eg: int ar[] = new int{1,2,3} /** * 数组用length属性取得长度 ...

  4. 低功耗蓝牙BLE之连接事件、连接参数和更新方法

    转自:http://blog.csdn.net/zzfenglin/article/details/51304084 连接事件 在一个连接当中,主设备会在每个连接事件里向从设备发送数据包.一个连接事件 ...

  5. ASP.NET使用Memcached

    一.安装Memcached及Memcached配置和状态查询 要想使用Memcached做缓存首先需要安装Memcached服务,安装方法如下: memcached.exe下载 保存至相应路径 打开c ...

  6. java基础-接口

    浏览以下内容前,请点击并阅读 声明 接口是java语言中的一个引用类型,和类一样,接口可以包含常量,方法签名,默认方法,静态方法和嵌套类型.含有方法主体的只有其中的默认方法和静态方法.接口不能被实例化 ...

  7. Qt quick 编程

    greaterThan(QT_MAJOR_VERSION,4):QT += widgets.在Qt 5之前,没有独立的QtWidgets模块,Qt Widgets包含在QtGui模块中. TARGET ...

  8. [转] JS中简单的继承与多态

    这里讲了一个最最最简单的JS中基于原型链的继承和多态. 先看一下以下这段代码的实现(A是“父类”,B是“子类”): var A = function(){ this.value = 'a'; this ...

  9. ZeroMQ接口函数之 ：zmq_init - 初始化ZMQ环境上下文

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_init zmq_init(3) ØMQ Manual - ØMQ/3.2.5 Name zmq_init - 初 ...

  10. Servlet和Struts2同时使用

    在做WEB项目时,要么是Struts+Spring+Hibernate,要是就直接使用servlet.这次碰到一个项目,经理想要把之前一个用servlet做的部分模块移植到当前项目下(Struts+S ...