CSS笔记-margin（塌陷、百分比、定位）

note：margin的top和bottom属性对非替换内联元素无效，例如和。

一、margin塌陷（collapsing）

定义：块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，如果都为负，取最小值；如果都为正，取最大值；如果一正一负，取和。

注意 浮动元素 和 绝对定位 元素的外边距不会折叠（因为这里触发了 块格式化上下文 BFC）。外边距折叠也只会发生在属于同一BFC的块级元素之间。

导致margin塌陷的三种情况：
1、相邻元素之间
毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动）。

2、父元素与其第一个或最后一个子元素之间
如果在父元素与其第一个子元素之间 不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动 将两者的 margin-top 分开 ； 或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height 将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。

3、空的块级元素
如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，则该元素的上下外边距会折叠。

二、margin的百分比取值是以谁为参照的？
w3c规范显示：

Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).

Note that percentages on ‘padding-top’ and ‘padding-bottom’ are relative to the width of the containing block, not the height (at least in a horizontal flow; in a vertical flow they are relative to the height).

也就是在水平流中（正常横向状态）margin和padding都是参照父容器的宽度

三、margin居中定位：

auto属性值：浏览器会自动选择一个合适的margin来应用。它可以用于将一个块居中。

在现代浏览器中，如果要把一些东西水平居中，使用 display:flex; justify-content: center; .而, 在一些老的浏览器，如IE8-9, 这些是不可用的. 想要把一个元素在其父元素中居中, 使用 margin: 0 auto;