margin扩充介绍

在CSS中margin有着自己独特的一些属性，这边小编一一介绍一下，防止知识的遗漏。

1.margin塌陷现象

首先margin塌陷现象只会在标准文档流中产生，浮动盒子没有margin塌陷现象。

margin塌陷现象是指在竖直上两个盒子在使用margin分块时会只取大的一个来隔开。

实例来讲的话就是：

上一个盒子有个 margin-bottom:30px;

下一个盒子有个margin-top:50px;

那么在隔开时会只以50px隔开而不会叠加。

左右不存在该现象。

2.盒子居中

盒子居中通常就是使用 margin:0 auto;

auto同样是类似于像素的一个属性，我们理解要到他的本质。

先举一个例子来说

margin-left:auto;  // 此时盒子会显示向右紧贴

margin-right:auto;    //同上类似

遵循上左下右一样

margin:0 auto;

代表上下外边距0，左右auto，就达到了居中效果

当然文本级居中不能使用该方法上面方法只属于块级元素。

应用：text-align:center;

margin语义上代表的是“兄弟”之间间隙。

所以在“父子”关系上不要套用该方法应用padding隔开。

最后就是一些margin兼容性问题一些小bug这边不做介绍。