任务10-浮动与定位

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

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。浮动样式可以应用在块元素及行内元素上，
1、应用浮动后，元素在一排显示，且相邻之间没有空隙。
2、应用在行内元素上时可以让其像display:inline-block一样支持宽高。
3、默认内容撑开宽度
4、脱离文档流，父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度将无法只由浮动元素撑开。
5、浮动会提升层级半层，普通元素会被遮档，如文档流中文字图片内容与浮动元素所占用区域重合，文字内容会被挤开。

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

因为浮动元素脱离文档流，父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度将无法只由浮动元素撑开。
清除浮动的方法有：
1、空标签清浮动:在父元素的子元素的最后添加一个没有高度的空的块标签，并且设置属性 clear:both;
2、
标签清浮动：在父元素的子元素的最后添加一个
标签，并且设置属性 clear:both;
3、after伪类 清浮动方法。

父元素:after{content:'';display:block;clear:both;}
父元素{zoom:1;}

after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom ：1 用来触发 IE下 haslayout，使元素根据自身内容计算宽高。

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

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

**relative **生成相对定位的元素，相对于其正常位置进行定位。还在文档流中，原来所占用的位不会被其它元素所占有。
如，"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。如果没有这样的祖先元素，则参照初始块即浏览器视口。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

**fixed **生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

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

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
Z-index 仅能在定位元素上奏效，元素可拥有负的 z-index 属性值。
用例：z-index:2;数值越高，越优先显示在上面。

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

position:relative 相对自身原来所占的位置，margin则相父元素设置外边距。

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

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
如何形成BFC ：
浮动（除none），绝对定位， display:inline-block/table-cells/table-captions, 和overflow的值不为visible, 时可以创建一个新的格式化上下文。BFC可以清除浮动（给浮动元素的父级加绝对定位或浮动样式都可以达到清除浮动的作用），和阻止margin合并。

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

外边距合并指的是，当两个垂直外边距相遇时，即当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。父子外边距合并的条件是父元素没有边框和padding隔开。
形成BFC 可以阻止外边柜合并，如上一题的浮动，绝对定位，inline-block,overflow不为none等都可以阻止。

Paste_Image.png

代码

1、实现如下alert效果，效果范例

http://js.jirengu.com/qefuquzumu/2/

2、实现如下表单效果， 效果范例

http://js.jirengu.com/limaziwili/5/

3、实现如下模态框效果， 效果范例

http://js.jirengu.com/rixufadute/2/

4、实现如下导航栏效果，效果范例

http://js.jirengu.com/dabokijexu/3/