上下相邻的（算一种兄弟关系）普通元素，上下边距并非简单的相加，而是取其中最大的边距值；而浮动的盒子边距是相加的；父子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. .Net自带缓存Cache的使用

    对于数据比较大,经常要从数据库拿出来用的,可以考虑使用.Net自带的缓存Cache,简单好用: //向内存中插入一个缓存 System.Web.HttpRuntime.Cache.Insert(&qu ...

  2. 卸载 ibus 使Ubuntu16.04任务栏与启动器消失 问题解决

    经查证是unity误卸载了,我使用了命令: sudo apt-get remove --purge ibus 解决方法是: 使用以下命令:重置compiz: dconf reset -f /org/c ...

  3. Python 中xrange和range区别

    先看看Python help()的说明 help(range) Help on built-in function range in module __builtin__: range(...) ra ...

  4. 【Java EE 学习 43】【SVN版本控制工具】【CVS版本控制工具】

    一.SVN SVN服务器下载地址:https://subversion.apache.org/ 1.什么是版本控制:版本控制是维护工程蓝图的标准做法,能追踪工程蓝图从诞生一直到定案的过程.是一种记录若 ...

  5. UVA766 Sum of powers(1到n的自然数幂和 伯努利数)

    自然数幂和: (1) 伯努利数的递推式: B0 = 1 (要满足(1)式,求出Bn后将B1改为1 /2) 参考:https://en.wikipedia.org/wiki/Bernoulli_numb ...

  6. MySQL批量删除指定前缀表

    Select CONCAT( 'drop table ', table_name, ';' ) FROM information_schema.tables Where table_name LIKE ...

  7. Ring3下的DLL注入(NtCreateThreadEx + LdrLoadDll方式实现，可以注入系统进程)

    工具介绍及使用请移步:http://blog.csdn.net/sunflover454/article/details/50441014 本文首发在零日安全论坛:http://www.jmpoep. ...

  8. scala tail recursive优化，复用函数栈

    在scala中如果一个函数在最后一步调用自己(必须完全调用自己,不能加其他额外运算子),那么在scala中会复用函数栈,这样递归调用就转化成了线性的调用,效率大大的提高.If a function c ...

  9. [BZOJ3874][AHOI2014] 宅男计划

    Description 外卖店一共有N种食物,分别有1到N编号.第i种食物有固定的价钱Pi和保质期Si.第i种食物会在Si天后过期.JYY是不会吃过期食物的.比如JYY如果今天点了一份保质期为1天的食 ...

  10. [深入浅出WP8.1(Runtime)]Windows Phone 8.1和Silverlight 8.1的区别

    1.2.2 Windows Phone 8.1应用程序模型 Windows Phone 8.1支持多种开发语言来开发应用程序,包括C#.VB.JavaScript和C++,那么本书的代码主要是采用C# ...