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

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

  2. node+fis3搭建

    node安装: 到https://nodejs.org/en/download/releases下载编译好的包, 如:https://nodejs.org/download/release/v4.4. ...

  3. 8-07CONTIUE 、 BREAK、RETURN

    CONTIUE: 可以让程序跳过CONTIUE关键字之后的语句,回到WHILE循环的第一行命令. BREAK:让程序跳出循环,结束WHILE的循环. BREAK: 让系统完全跳出循环,结束WHILE循 ...

  4. IBM x3850 x5 服务器 安装 Windows Server 2008

    一.硬件需求 一个8G以上的U盘 二.软件需求 1.Windwos Server 2008镜像 2.系统启动盘制作工具Ultraiso 3.IBM ServerGuide引导镜像 三.制作及安装步骤 ...

  5. [转]Ubuntu 12.04中文输入法的安装

    Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ibus是输入法框架. 在Ubuntu的中文系统中自带了中文输入法,通过Ctrl+S ...

  6. [leetcode] 题型整理之数字加减乘除乘方开根号组合数计算取余

    需要注意overflow,特别是Integer.MIN_VALUE这个数字. 需要掌握二分法. 不用除法的除法,分而治之的乘方 2. Add Two Numbers You are given two ...

  7. 前端面试-难点问题2-java和javascript的区别

    经过多方面的参考,结合自己掌握的知识,总结了一下java和javascript的区别.欢迎大家评论! 一.关系 虽然java和javascript在名字和语法上有一点相似,并且有一些联系,javasc ...

  8. python 异常

    引用一段来自菜鸟教程的文章:http://www.runoob.com/python/python-exceptions.html Python 异常处理 python提供了两个非常重要的功能来处理p ...

  9. linux系统ftp命令

    先来一段简单的ftp 下载脚本 ftp -i -n<<EOF open 14.2.33.211 user etl etl cd /etlfile/ftpfile lcd /etlfile/ ...

  10. javascript面向对象(三):非构造函数的继承

    本文来自阮一峰 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承" ...