浮动定位BFC边距合并

2017-10-26 本文已影响0人 HE_Zoro

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

浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素display的默认值为"block"，浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
对父容器：父容器并不能感知浮动元素的存在，当一个父容器所有的子元素都设置为浮动元素时，会造成父元素高度塌陷问题。
对其他浮动元素：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
对普通元素：其他普通元素表现得浮动元素好像不存在一样，但是浮动元素会覆盖普通元素，可通过z-index来控制叠放顺序；
对文字：普通流中文本可以感知到浮动元素的存在，当产生堆叠的时候，文字会对浮动元素的外边框形成环绕效果；

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

清除浮动：解决父容器高度塌陷的问题；
清除浮动的方法：
1、在父容器里最后位置添加一个空div，设置它的clear为both。缺点是增加了一个无意义的标签。
2、对父容器定义overflow为 hidden|auto|scroll来形成BFC达到“清浮动”效果。
3、通用的方法：在父容器中添加一个class=clearfix；
设置：

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

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

CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式。
相对定位 relative：生成相对定位的元素，相对于元素本身正常位置进行定位,使用场景：不需要脱离正常文档流，并进行定位的元素。

image.png

absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定；
使用场景：需要脱离正常文档流，并进行定位的元素。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定；
使用场景：始终出现在窗口某个位置的部分。
inherit：规定应该从父元素继承 position 属性的值；
static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

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

作用：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。z-index的值越大，越靠前，离用户更近。

image.png

在position:relative、position:absolute和position:fixed参与的情况下才有作用，表示层级。
上述只是z-index的简单用法，透明度也会影响堆叠顺序。
在未使用position进行定位时，设置一个小于1的opacity值，该层会覆盖其他层。

image.png

当设置position为absolute、fixed或relative时，对已经通过设置z-index的值改变出现顺序的元素，添加属性opacity值小于1，会对其产生影响。效果如下：

image.png

image.png
其原因与堆叠顺序有关，当一个元素位于HTML文档的最外层（<html>
元素）或被定位了并且拥有一个z-index 值（不为auto）以及被设置了opacity ，transforms , filters , css-regions , paged media 等属性。会产生新的层，从而影响堆叠顺序。
详细原理可参考：http://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html

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

position:relative：相对定位，偏移后元素未脱离文档流且所占的原始空间仍会被保留，不会对文档流造成偏移影响；
而负margin则是做整体的移位，不会脱离文档流，但是会影响文档流的位置，其他元素有可能也随之偏移。

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

BFC的全称是 Block Format Content 即块级格式化上下文。它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
生成BFC：
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
BFC具有以下特性：
1、BFC会阻止垂直外边距（margin-top、margin-bottom）折叠。
2、BFC不会重叠浮动元素。
3、BFC可以包含浮动
利用上述特性，BFC可以：
1、解决外边距合并的问题，让两个块级元素处于不同的BFC中。
2、解决父容器高度塌陷问题。
3、解决文字对浮动元素环绕的问题。
合并外边距
 解决父容器高度塌陷
 文字环绕