电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 浮动定位BFC边距合并（3） [打印本页]

作者: look_w 时间: 2019-2-19 19:05 标题: 浮动定位BFC边距合并（3）

4.z-index 有什么作用? 如何使用?

z-index属性适用于定位元素(position属性值为 relative 或 absolute 或 fixed的对象)，用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack order)。

z-index值越大，越在最上层。且只有在相同父元素中才能比较。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?

position:relative 不会影响其他的普通文档流的，普通文档流仍然会在偏移之前的占据的位置后面正常排列。只是视觉上有可能覆盖到普通文档流。

负margin 本身仍然是普通文档流中的一员，实际上位置发生偏移，会影响之后的普通文档流的排列。

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC是 Block Format Context 格式化块状上下文规则。

生成BFC的方法。
      float:right/left;
      overflow:不为visible;
      position:absolute/fixed
      display:inline-block,table-cell,table-capation

display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC

BFC规则

      内部的Box会在垂直方向上一个接一个的放置

      垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关，其中一个元素生成新的BFC就不会再发生重贴。）

      每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

      BFC的区域不会与float的元素区域重叠

      计算BFC的高度时，浮动子元素也参与计算

      BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

可以解决的问题有：

父元素生成BFC就可以包住浮动元素，达到清除浮动的目的，解决浮动元素父元素高度塌陷。

解决外边距合并问题，同处于一个BFC规则下的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。

7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例.

只有普通文档流中块框的垂直外边距才会发生外边距合并。
合并的情景：

上下相邻

这种情况合并以外边距大者为准，不管有没有外边框。

上下相邻

这种情况合并以外边距大者为准，不管有没有外边框。

如何不让其合并。

对于第一种相邻子元素的margin，可以为第一个元素或者第二个元素加上一个新的BFC外壳，如可以为第一个元素加一个absolute的父元素。

对于第二种可以为父元素创建新的BFC，或者为父元素加上padding或者border.

对于第三种自身合并直接加content就行了。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)