浮动定位BFC边距合并

1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?

  • 特征:
    浮动元素脱离普通文档流,普通文档流的元素无法识别浮动元素,所以会视其不存在。但是float浮动还是会被其中的行内元素所识别,比如说文本之类的。浮动元素在脱离普通文档流之后,会相对其父元素的内边框靠拢。元素在设置float属性浮动之后,元素的display属性变更为block。
  • 影响:
    1.对父容器来说,浮动元素贴着内边距排列,父容器不识别浮动元素,所以浮动元素的内容无法撑开父容器。
    2.对于float的浮动元素来说,他们是同一文档流,他们之间可以相互识别,所以float浮动元素相互之间紧贴排列。对于position元素来说,他们的浮动相互之间不识别并且他们跟普通的文档流和float浮动元素都不识别,所以他们之间可以相互重叠,设置z-index使之按照理想的情况重叠。
    3.普通元素无法识别浮动元素,所以普通元素仍按照普通文档流就行布局。
    4.文字可以识别出浮动元素,所以文字的排列会环绕浮动元素。

2.清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动指的是元素在浮动之后会带来一些副作用,我们需要将这些副作用清除掉,这个过程就叫做清除浮动。浮动所带来的副作用主要有以下三种:
1.父容器高度塌陷。
2.文本识别出了浮动元素,出现在浮动元素体内。
3.浮动元素与其他元素重叠,影响了整体样式效果。
清除浮动的方法:
1.在父容器中的最后加一个块级元素标签,一般使用div,写入样式clear:both;,但这种方法增加了多余的标签,不符合标签语义化的规则,所以不推荐。
2.跟第一种方法是同一种原理,不过却是利用伪元素来实现,具体代码如下:

.clearfix{
  *zoom: 1;
}
.clearfix:after{
  content: "";
  display: block;
  clear: both;
}

第二种方法不增加额外的标签,而且很好的解决了父容器高度塌陷的问题,所以一般使用第二种方法。另外上面有两个样式,第一个样式其实也可以不写,因为那是针对低版本的IE浏览器,IE6,IE7的兼容性设置的。现在我们兼容性一般都是IE9起步了,毕竟淘宝都不支持IE8了。
3.使父元素成为一个BFC,由于BFC的特性:可以包含浮动元素,所以达到了清除浮动的效果。

3.有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?

有5种定位方式。
1.inherit,继承父容器的定位属性,使用场景无,一般我们不使用这个来进行定位。
2.static,默认值,没有定位属性,处于普通的文档流中,没有top right bottome left z-index这些属性。
3.relative,相对定位,参考点为元素自身,通过设置top right bottome left z-index来定位,一般上下选一个,左右选一个就可以实现定位了,比如top:0; right:0; 使用relative,他本身元素所占空间仍然存在。使用场景一般是为了给子元素一个参考点,使子元素的absolute能够正常使用。
4.absolute,绝对定位,仓考点为父容器的position属性,可以是relative,absolute,fixed,一般我们使用relative。也是设置top right bottome left z-index来定位,但是与relative不同的是,他原本自身的空间不保留,使用场景一般为父容器的子元素进行定位。
5.fixed,固定定位,相对于浏览器窗口进行定位,也是使用top right bottome left z-index来定位,使用场景一般用于需要某个元素一直固定在页面中的某个位置。

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

作用:z-index为元素在页面中的z轴的优先级,即人跟电脑屏幕的直线距离,z-index值大的元素将覆盖掉z-index值小的元素(一般情况下,特殊情况请往下看)。
使用条件: 当元素被定位时(absolute,relative,fixed),z-index才生效。

如图,虽然b的z-index大于c,但是b却并没有覆盖掉c,因为b未设置定位属性,如图:

z-index定位有效.jpg

but,当给b一个定位属性position: relative; z-index生效了,b跑到了最前面。

z-index定位有效2.jpg

注意事项:

  • z-index的值的大小不一定决定堆叠顺序,堆叠顺序还与文档流顺序有关,比如父子关系中,父元素的z-index大于子元素的z-index,但是子元素却覆盖父元素,如图:
z-index父子关系.jpg
  • 在兄弟关系中,是由最高层的父元素z-index来决定子元素的堆叠顺序,与子元素z-index无关,如图,虽然d的z-index大于f,但是由于b的z-index小于c,所以f覆盖了d,如图:
z-index兄弟关系.jpg

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative是相对于元素原本的位置进行偏移,偏移之后,原本的元素所占空间依旧保留。并且他将变成浮动元素,与其他所有元素都不识别。
负margin是子元素相对于父元素的内边框进行偏移,偏移之后,原本的元素所占空间不保留。并且偏移之后元素仍处于正常文档流中。

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

  • 是什么?BFC是 block formatting context的缩写,意思就是格式化内容文本。创建了一个BFC的元素就是一个独立的盒子,只有block level box可以参与创建BFC,他的内部与外部都不受盒子外的元素的影响。
  • 如何生成?可以给需要创建BFC的元素添加以下任意属性:
    1.float,除了none都可以。
    2.overflow,设置为auto,hidden,scroll中的任意一个都可以。
    3.position,设置为absolute,fixed都行。
    4.display,设置为inline-block,table-cell,table-caption。
  • BFC的作用:
    1.阻止垂直边距的折叠。
    如图,当父元素为BFC的时候,父元素中的子元素他们的垂直外边距不合并,所以他们的margin值都有效。


    BFC.jpg

而当父元素不是BFC元素的时候,子元素h1的垂直边距与父元素发生合并,导致子元素的margin值不是相对于父元素div,而是与父元素边距合并之后,相对于body进行了一个margin值的偏移。如下图。

非BFC.jpg

2.BFC元素与浮动元素不重叠。
也就是说他们之间可以相互识别,不会重叠。还是看图理解吧。下图是非BFC的时候,浮动元素与BFC元素无法识别,所以两者发生重叠。

非BFC重叠.jpg

当.bfc变成BFC元素时(添加了一个overflow: hidden),浮动元素与BFC元素相互识别出来了,不重叠,如图:

BFC不重叠.jpg

3.BFC元素可以包含浮动。
当一元素不为BFC时,他的子元素如果浮动了,假设他只有这一个子元素,那么由于该元素无法识别浮动元素,所以他的内容无法撑开,导致高度塌陷,所以这个时候,我们可以给该元素设置一个BFC,来清除浮动带来的副作用。
如图,父元素非BFC时,子元素浮动,父元素高度塌陷。

非BFC不包含浮动.jpg

当父元素为BFC的时候,子元素浮动,父元素包含浮动子元素,父元素高度塌陷的问题得到解决,如图:

BFC包含浮动.jpg

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

合并场景:

  • 当父元素不是BFC元素时,最靠近父元素的子元素的外边距会与父元素的外边距发生合并,也就是父元素和相邻子元素发生了外边距合并。如图


    非BFC.jpg
  • 当两个块元素上下相邻,上面的元素有margin-bottom,下面的元素有margin-top ,然后margin-top和 margin-bottom取其中的较大值。如下图:
相邻1.jpg
相邻2.jpg

从上图可以看出,虽然两个块级元素都有外边距,但是实际效果确实取值较大的边距。

  • 空元素不存在border、padding、height、line-height,它的上边距将与下边距合并,如图:
空元素.jpg

2.如何合并:

  • 父子关系中,子元素的外边距变成父元素的外边距。
  • 兄弟关系中,两者的外边距合并成一个,取较大值。
  • 空元素中,上边距与下边距合并成一个。

3.如何阻止相邻外边距合并:

  • 父子关系中,可以给父元素设置BFC,border,padding。
  • 兄弟关系中,可以设置float,inline-block,absolute。
  • 还有一个小技巧,就是上下结构中,只写一种间距,要么都是margin-top,要么都是margin-bottom。

4.范例,上面有一个父子外边距合并的案例,这里就不重复了。

代码

1.http://js.jirengu.com/kiya/1
2.http://js.jirengu.com/limo/1
3.http://js.jirengu.com/lonar/1
4.http://js.jirengu.com/koge/3

推荐阅读更多精彩内容