css关于margin总结

一 margin与可视尺寸 （适用场景     一侧定宽的自适应布局）

1.适用于每月设定width/height的普通block水平元素

2.只适用于水平方向尺寸

二 margin与占据尺寸 （适用场景     滚动容器内上下留白）

1.block/inline-block水平元素均适用

2.与有没有设定width/height值无关

3.适用于水平方向和垂直方向

三 百分比margin的计算规则 （适用场景     宽高2:1自适应矩形）

1.普通元素的百分比margin都是相对于容器的宽度计算的

2.绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的。

四 margin重叠

a.margin重叠通常特性

1.block水平元素（不包括float和absolute元素）

2.不考虑writing-mode(书写格式),只发生在垂直方向（margin-top/margin-bottom）

b.margin重叠3种情境

1.相邻的兄弟元素

2.父级和对一个、最后一个子元素

3.空的block元素

c.margin-top重叠

1.父元素非块状格式化上下文元素

2.父元素没有border-top设置

3.父元素没有padding-top值

4.父元素和第一个子元素之间没有inline元素分隔

d.margin-bottom重叠

1.父元素非块状格式化上下文元素

2.父元素没有border-bottom设置

3.父元素没有padding-bottom值

4.父元素和第后一个子元素之间没有inline元素分隔

5.父元素没有height,min-height,max-height限制

e.空block元素margin重叠其他条件

• 1.元素没有border设置

2.元素没有padding值

3.里面没有inline元素

4.没有height,或者min-height

f.重叠计算规则

1.正正取大值

2.正负值相加

3.负负最负值

g.善用margin重叠

1.更具有健壮性，最后一个元素移除或位置调换，均不会破坏原来的布局

.list{

margin-top :15px;

margin-bottom:15px;

}

五 marign的auto

a.block元素
b.writing-mode与垂直居中
c.absolute与margin居中

六 css margin 负值定位

1.margin负值下的两端对齐

2.margin负值下的等高布局

3.margin负值下的两栏自适应布局

七 CSS margin无效情形解析

a.inline水平元素的垂直margin无效

1.非替换元素

2.正常书写模式

b.margin重叠

c.display:table-cell与margin

display：table-cell/display:table-row等声明的margin无效

d.position:absolute与margin

绝对定位元素非定位方位的margin值“无效”

绝对定位的margin值一直有效，只是不像普通元素那样，可以和兄弟元素插科打诨。

e.鞭长莫及导致的margin无效  （只是值不够大而已，相对于整个容器而言）

f.内联特性导致的margin无效  （负值到很小的时候，基线有关）

（参考了张鑫旭老师的课程）