mooc-CSS方面的总结与梳理

margin改变尺寸

margin与可视尺寸

1、适用于没有设定width/height的普通block水平元素。

（浮动元素，absolute/fixed元素，内联元素不在此范围内）

2、只适用于水平方向的尺寸

margin与占据尺寸

1、块级/内联元素同样适用

2、与有没有设置width/height无关

3、适用于垂直与水平方向

在“滚动容器内上下留白”，外层div使用padding时，会导致浏览器兼容问题。使用内层元素margin可以生效。

margin与百分比单位

普通元素百分比margin的计算规则：根据当前元素的宽。

绝对定位元素百分比margin的计算规则：根据当前元素的第一个定位祖先元素的宽

margin重叠

1、水平块级元素，不包括浮动元素与绝对定位元素。

2、不考虑writing-mode，只发生在垂直方向。

重叠情况

1、相邻兄弟元素

2、父元素与第一个/最后一个子元素重叠