CSS深入理解学习笔记之margin

1、margin与容器尺寸

　　元素尺寸：①可视尺寸 clientWidth（标准）；②占据尺寸

　　

　　margin与可视尺寸：①适用于没有设定width/height的普通block元素；②只适用于水平方向尺寸

　　margin与占据尺寸：①block/inline-block水平元素均适用；②与有没有设定width/height无关；③适用于水平方向和垂直方向。可用于页面的上下留白（padding兼容性不好）。

2、margin与百分比单位

　　普通元素的百分比：相对于容器宽度计算。

　　绝对定位元素的百分比：相对于第一个定位的祖先容器的宽度计算的。

3、margin重叠

　　margin重叠通常特性：①仅发生在block水平元素上（不包括float和absolute元素）；②不考虑writing-mode的情况下，只发生在垂直方向上。

　　margin重叠的情境：①相邻的兄弟元素；②父级的第一个/最后一个子元素；③空的block元素

　　

　　

4、margin重叠的计算规则

　　正正取大值；正负值相加；负负最负值。

　　margin的善用实例：

　　

 

 5、理解margin:auto

 　　规则：如果一侧是定值，一侧是auto，则auto是剩余空间大小；如果两侧均为auto，则平分剩余空间。

　　 writing-mode与垂直居中（这样修改后宽度的margin:auto居中效果就会失效）：

　　

　　绝对定位元素的margin居中：

　　

 6、margin负值定位

　　margin负值下的两端对齐：

　　

　　margin负值下的等高布局：

　　

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

　　

 7、margin失效情形解析

　　⑴ inline水平元素的垂直margin无效前提：①非替换元素，例如不是<img>元素；②正常书写模式。

　　⑵ margin重叠

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

　　⑷ position:absolute与margin：绝对定位元素未设置定位方向的margin值”无效“。例如，img{top:10%}的margin-top有效其他均无效。

　　⑸ 鞭长莫及导致的margin无效。

　　⑹ 内联特性导致的margin无效：

　　　　

8、了解margin-start/margin-end等属性

　　margin-start：①正常的流向，margin-start等同于margin-left，两者重叠不累加；②如果水平流是从右向左，margin-start等同于margin-right；③在垂直流下（writing-mode:vertical-*;），margin-start等同于margin-top。

　　margin-end：①正常的流向，margin-end等同于margin-right，两者重叠不累加；②如果水平流是从右向左，margin-end等同于margin-left；③在垂直流下（writing-mode:vertical-*;），margin-end等同于margin-bottom。

　　margin-collapse：控制margin重叠。collapse（默认-重叠），discard（取消，使margin无效），separate（分隔，无margin重叠）。