task10

2017-07-26 本文已影响0人 peaceChierdo

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

特征：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动元素不在文档的普通流中，文档的普通流中的块框表现得就像浮动框不存在一样。

影响：
- 父容器：如果父容器的子元素都是浮动元素，如果父容器没有定义高度，那么父容器会失去高度，在浮动元素之外。
- 其它浮动元素：浮动元素可以左右移动(根据float属性值而定)，直到它的外边缘碰到包含框或者另一个浮动元素的边缘
- 普通元素：浮动元素后面的普通元素的框会表现的像浮动元素不存在一样
- 文字：如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现的像浮动元素不存在一样，但是框的文本内容会受到浮动元素的影响:文本内容会移动以留出浮动元素的空间(文档流中的元素的框无法感知浮动元素，但是普通元素内部的文本内容能感知到浮动元素)。

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

使用浮动元素可能会导致一些问题，比如文档流的元素中的文字会围绕浮动元素排列，比如由于容器内元素浮动，脱离了文档流，所以容器只剩下边距的高度。为了解决这些问题，就需要清除浮动。

法1：针对文字包围浮动元素的情况，可以使用clear属性来清除浮动
法2：针对使用浮动元素后父容器出现的高度问题，可以使用BFC清理浮动或者为父容器添加一个空元素

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

position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。

static: 是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。
relative: 是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
absolute:
设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。
fixed: 它参照的坐标系是浏览器的窗口，固定定位的元素不随着页面滚动而移动，它会始终保持在那个位置。
sticky:在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

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

绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序。z-index的值越高，元素位置越靠上。

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

position:relative;相对自己原本位置发生偏移，在文档流中仍占据原来的空间，不影响其它普通流中元素的位置。
负margin在改变自身位置的情况下，也会影响页面上其他元素的定位。

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

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素
生成BFC：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
作用：
防止垂直 margin 合并
清除内部浮动
自适应两栏布局（BFC的区域不会与float box重叠）