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

note&＃xff1a;margin的top和bottom属性对非替换内联元素无效&＃xff0c;例如和。

一、margin塌陷&＃xff08;collapsing&＃xff09;

定义&＃xff1a;块级元素的上外边距和下外边距有时会合并&＃xff08;或折叠&＃xff09;为一个外边距&＃xff0c;如果都为负&＃xff0c;取最小值&＃xff1b;如果都为正&＃xff0c;取最大值&＃xff1b;如果一正一负&＃xff0c;取和。

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

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

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

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

二、margin的百分比取值是以谁为参照的&＃xff1f;
w3c规范显示&＃xff1a;

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).

也就是在水平流中&＃xff08;正常横向状态&＃xff09;margin和padding都是参照父容器的宽度

三、margin居中定位&＃xff1a;

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

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