上下相邻的（算一种兄弟关系）普通元素，上下边距并非简单的相加，而是取其中最大的边距值；而浮动的盒子边距是相加的；父子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. windows 8下配置PLSQLDeveloper

    Win 8 64位系统上安装64 位Oracle,但是没有64位的PL/SQL,不能连接Oracle数据库,怎么办呢?方法是有的:我们可以通过安装32位的Oracle客户端来实现连接. 工具/原料 P ...

  2. python备忘--函数

    1.zip函数 zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表. x = [1, 2, 3] y = [4, 5, 6] z = [7, 8, 9] xyz = zip( ...

  3. LeetCode——Copy List with Random Pointer（带random引用的单链表深拷贝）

    问题: A linked list is given such that each node contains an additional random pointer which could poi ...

  4. UITableView在设置contentOffset的同时也reload，造成tableView的contentOffset偏差

    最近在写一个聊天的框架,遇到一个奇葩的问题,就是发送聊天记录的时候(需要tableView上移,显示出最新的记录),增加一条记录无疑需要reload一下(大家都明白的),这是就会出现头疼的问题,页面显 ...

  5. 在SQL SERVER中实现RSA加解密函数（第一版）

    /*************************************************** 作者:herowang(让你望见影子的墙) 日期:2010.1.1 注:   转载请保留此信息 ...

  6. Microchip微芯HCS301解密HCS360解密HCS361芯片解密多少钱？

    Microchip微芯HCS系列芯片解密型号: HCS101 | HCS200 | HCS201 | HCS201T | HCS300 | HCS300T HCS301 | HCS301T | HCS ...

  7. RUDP之二 —— Sending and Receiving Packets

    原文链接 原文:http://gafferongames.com/networking-for-game-programmers/sending-and-receiving-packets/ Send ...

  8. mac系统下mysql开机启动总是3307

    修改了mysql的my.cnf可还是不行,启动后就是3307,必须关掉再启动. 觉得可能是mac系统在哪里写死了开机启动项. http://queforum.com/mysql/1012987-mys ...

  9. HDU 1392 凸包模板题，求凸包周长

    1.HDU 1392 Surround the Trees 2.题意:就是求凸包周长 3.总结:第一次做计算几何,没办法,还是看了大牛的博客 #include<iostream> #inc ...

  10. ZeroMQ接口函数之 ：zmq_msg_size - 以字节为单位返回消息内容的大小

    ZeroMQ 官方地址 :http://api.zeromq.org/4-2:zmq_msg_size zmq_msg_size(3)  ØMQ Manual - ØMQ/3.2.5 Name zmq ...