css margin 属性的相关知识

css 中的 margin 属性在没有设置 width/height属性， 而且是普通的 block 元素的时候（不是定位元素， 不是浮动元素），

margin 是可以改变元素的可视宽度（clientWidth）的。  

同时， margin 还可以改变元素的占据尺寸， 这时候适用的场景就比较多了，

1， inline-block/block 元素都适用。

2， 即使是元素设置了width/height属性也是可以的。

3，对水平方向和垂直方向都有影响 。

margin/padding 值为百分比的时候， 计算所取的值是父容器宽度的值。

例如： 一个父动器的宽度是 600px, 高度是 200px， 内部有一个 <div/> 元素， 设置这个 <div/> 元素的 margin-top: 50%;

    那么这个结果值是 300px, 而不是 100px。

    另外一种情况， 如果子元素是一个定位元素， 那么 margin / padding 属性相对于的就不一定是父容器了， 而是第一个带有定位属性的祖先元素。

CSS margin 重叠

1， 父元素与子元素之间会发生重叠现象(这个子元素应该是父元素的第一个子元素或者是最后一个子元素)

2， 相邻的兄弟元素之间会发生重叠现象

（注意： 重叠是只发生在垂直方向上的（margin-top, margin-bottom）， 且定位元素或者是浮动元素等会自动创建块级格式化上下文的元素也不会发生重叠现象， 另外我还发现了一种方式就是给父元素设置 border 属性之后(margin-top重叠就设置 border-top 属性， margin-bottom 重叠就设置 border-bottom 属性)， 父子元素也不会发生重叠现象。）